Member Avatar for kcgagne

I should know this one by now... But I can't seem to fix the discrepencies between IE and Firefox on this one. Anyone bored and want to help?

body { 
font: 18px Verdana, Arial, Sans-Serif; 
background: #FFFFFF; 
color: #000000; 
text-align: center;
}

a { 
color: #FFFFFF; 
text-decoration: none; 
}

#wrapper { 
margin: 0 auto;
text-align: center;
width: 854px; 
background: #FFFFFF;
}

#header {
height: 400px;
margin: 0px;
text-align: center; 
}

#navbartop {  
margin: 0;
padding: 0;
text-align: center;
}

.topitem {
float: left;
text-decoration: none;
margin: 0 14px 0 0;
padding: 20px 15px 15px 15px;
font-size: 18px;
font-weight: bold;
background: #6EB43F;
height: 50px;
color: #FFFFFF;
}


#sidebar {
float: left;
width: 300px;
}

.tabitem {
text-decoration: none;
margin: 14px 10px 0 0;
padding: 6px 10px 6px 8px;
font-size: 18px;
font-weight: bold;
background: url('images/navbar.gif');
color: #FFFFFF;
}

#content {
clear: both;
background: #FFFFFF; 
color: #000000;
padding: 2px 0px;
text-align: left;
}

.sidebox {
float: right;
width:200px;
padding: 10px;
margin: 40px 0 0 20px;
background: #EDF5E7;
font-style:italic;
font-weight: bold;
}

#footer {
margin: 20px 0 0 0;
padding: 5px;
font-size: 12px;
background: #FFFFFF; 
}

#footer p {
margin: 0;
}
  • 3 Contributors
  • 3 Replies
  • 98 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by valonesal

Dani AI

Generated

posted the stylesheet but not the markup, so as and already pointed out it is hard to be specific. Common, verifiable causes for IE vs Firefox layout differences are: wrong or missing DOCTYPE (triggers quirks mode in IE), floats that are not contained, mixing fixed height with vertical padding (different rendering can expose overflow), and older-IE bugs (double-margin on floated elements, lack of "layout"). The checklist and small fixes below will help isolate the problem quickly.

Run these checks in order:

  • Ensure a standards DOCTYPE is present at the very top of the page, for example:

    <!DOCTYPE html>

  • Validate the HTML (matching opening/closing tags) and reduce the page to a minimal test case: wrapper + header + one nav item. If the minimal case behaves correctly, re-introduce pieces until it breaks.

  • Use the browser developer tools (Firefox/Chrome/IE F12) to inspect the computed box model for the elements that differ (width, padding, border, margin). Compare sums to the container width.

  • As a quick containment test, add overflow:auto; to the parent that should wrap floated children. If that fixes the visual gap, use a proper clearfix.

Helpful CSS snippets (apply only while testing):

/* modern clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
/* fixes IE6 double-margin on floats */
.floated { float: left; display: inline; }
/* gives layout to IE6/7 when needed */
.ie-haslayout { zoom: 1; }

Notes and cautions: prefer using line-height or vertical-centering techniques instead of stacking height + large vertical padding on nav items; that combination commonly produces different renderings. If these steps do not resolve it, post the minimal HTML (header/nav/wrapper) and the specific elements’ computed widths from the dev tools so targeted fixes can be suggested.

Recommended Answers

All 3 Replies

Member Avatar for kcgagne

Please?

Member Avatar for ko ko

Your HTML ..?

Member Avatar for valonesal

Agreed we cant help if we cant see the code, please post a copy of your code and css and we will be glad to help where we can.:)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.