|
| |
|
|
Deb W
Posts: 4
From: None
Status: offline
 |
IE vs. FF Whitespace Issues - 9/4/2007 14:07:44
I'm rather new to CSS and am having a problem with the way some of my pages look in IE vs. Firefox with regards to whitespace.
I used a Dreamweaver CS3 template for the page.Both the XHTML and CSS have been validated.
MYC History Page
Take a look at the "acres" of whitespace under the two div boxes in IE. Everything looks fine in FF.
Thanks!
Here's the CSS:
quote:
body {
font : 100% Arial Narrow, Verdana, Arial, sans-serif;
background : #ffffff;
margin : 0;
padding : 0;
text-align : center;
color : #000000;
}
.twoColElsLtHdr #container {
width : 51em;
background : #ffffff;
border : 1px solid #003399;
text-align : left;
position : relative;
margin-top : 0;
margin-right : auto;
margin-bottom : 0;
margin-left : auto;
overflow : hidden;
clear : both;
}
.twoColElsLtHdr #header {
background : #ffffff;
}
.twoColElsLtHdr #header h1 {
margin : 0;
padding : 10px 0;
}
.twoColElsLtHdr #sidebar1 {
float : left;
width : 10em;
background : #003399;
padding-top : 15px;
padding-right : 0;
padding-bottom : 15px;
padding-left : 0;
}
.twoColElsLtHdr #sidebar1 h3, .twoColElsLtHdr #sidebar1 p {
margin-left : 10px;
margin-right : 10px;
}
.twoColElsLtHdr #mainContent {
width : 38em;
margin-top : 0;
margin-right : 1.5em;
margin-bottom : 0;
margin-left : 11em;
position : absolute;
left : -3px;
}
.twoColElsLtHdr #footer {
padding : 0 10px;
background : #003399;
}
.twoColElsLtHdr #footer p {
margin : 0;
padding : 10px 0;
}
.fltrt {
float : right;
margin-left : 8px;
}
.fltlft {
float : left;
margin-right : 8px;
}
.clearfloat {
clear : both;
height : 0;
font-size : 1px;
line-height : 0;
}
.hide {
color : #ff0000;
text-decoration : none;
}
.hide:link {
color : #ff0000;
text-decoration : none;
}
.hide:visited {
text-decoration : none;
color : #ff0000;
}
.hide:hover {
text-decoration : underline;
color : #ff0000;
}
.hide:active {
text-decoration : none;
color : #ff0000;
}
.style4 {
color : #ffffff;
}
.style5 {
font-size : 85%;
}
#winners {
position : absolute;
left : -165px;
top : 400px;
width : 135px;
background-color : #ffffff;
padding : 4px;
}
#history_left {
position : absolute;
left : 20px;
top : 700px;
width : 44%;
background-color : #eeeeee;
margin : 0;
padding : 10px;
}
#history_right {
width : 44%;
position : absolute;
left : 330px;
top : 700px;
background-color : #eeeeee;
margin : 0;
padding : 10px;
}
.style6 {
font-size : 100%;
}
.style7 {
color : #0a246a;
}
.style8 {
font-size : 85%;
color : #0a246a;
}
|
|
|
|
Deb W
Posts: 4
From: None
Status: offline
|
RE: IE vs. FF Whitespace Issues - 9/5/2007 7:58:35
Wow, thanks for the corrections. I had a feeling that the template I was using was a lot more complicated than needed.
I had to put the line breaks in to make the left side bar work in Firefox. It's a mess of coding!
I look forward to dissecting your example.
Edit: Okay, using your page as a template, here's another sample page with the history text removed.
New Page
I'm having issues with positioning HV javascript menu.
My questions are:
1. Normally I would have the following code pasted directly under the body. Is it necessary if MenuPos is now an id?:
<script type='text/javascript'>
[size=1//HV Menu- by Ger Versluis (http://www.burmees.nl/)
//Submitted to Dynamic Drive (http://www.dynamicdrive.com)
//Visit http://www.dynamicdrive.com for this script and more
function Go(){return}
</script>
<script type='text/javascript' src='exmplmenu_var.js'></script>
<script type='text/javascript' src='menu_com.js'></script>
<noscript>Your browser does not support script</noscript>
2. There is a difference in the menu positions between IE and FF. Currently, I am positioning from the javascript file. Here is some text from the menu configuration file that explains how it is positioned:
TargetLoc
Text string- Enables relative positioning of the menu.
1- In the HTML-file where the menu shows you need a named div:
<div id='MenuPos' style='position:relative'></div>
2- Set TargetLoc to 'MenuPos'
3 - Set MenuCentered to 'left', MenuVerticalCentered to 'top' and StartTop and StartLeft to 0
4 - StartTop, StartLeft and the Menu center variables can still be used to get an offset from the <div>.
Remarks: the different ways browsers interpret the pageX and pageY offset makes this feature difficult. I got the best results by putting the div inside a table, give the div the same dimensions as the first level menu, put an transparent image inside the div with again the same dimensions as the first level menu
<table>
<tr><td>
<div id='MenuPos' style='position:relative; width:102; height:102;'><img src='transparent.gif' width='102' height='102'></div>
</td></tr>
</table>
3. Can you recommend a good source for easy to use templates? I would rather avoid using the Dreamweaver templates.
Edit 2 The container width is back to 800px. That's what
TPTB want despite my suggestions otherwise.
You will notice that I put a javascript slideshow and a radar image on the page. I put them both in divs and tables for positioning.
Thanks again for your help.
< Message edited by Deb W -- 9/6/2007 11:25:15 >
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
