IE/Firefox Display Issue

L

liunx

Guest
Hi,

The menu of this:
<!-- m --><a class="postlink" href="http://glensignal.com/clients/kctw/">http://glensignal.com/clients/kctw/</a><!-- m -->
website displays fine in IE but quite differently in Firefox. The problem seems to be with the width and height of each menu item but I'm not sure how to fix it.

IE screenshot
<!-- m --><a class="postlink" href="http://glensignal.com/clients/works-in-ie.gif">http://glensignal.com/clients/works-in-ie.gif</a><!-- m -->

Firefox screenshot
<!-- m --><a class="postlink" href="http://glensignal.com/clients/broken-in-firefox.gif">http://glensignal.com/clients/broken-in-firefox.gif</a><!-- m -->


Code:


<code>
.menu a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 27px;
color: #FFFFFF;
text-decoration: none;
background-color: #000000;
text-align: left;
height: 26px;
width: 196px;
padding-left: 15px;
margin-bottom: 1px;
}
.menu a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
background-color: #83A871;
text-decoration: none;
}


Thanks,
GlenIt basically comes down to a table-base layout and non-sensical mark up. Rebuild it starting with meaningful HTML then style it with CSS. It's a trivial page and can easily display properly in all the graphical browsers.

What the heck. Here's what you should be starting with. This can be made to look exactly like what you have AND it can look the same in all browsers using CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Conforming HTML 4.01 Transitional Template</title>
</head>
<body>
<div id="banner"><h1>Technology Web</h1></div>
<div id="menu">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Foods</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Graphics</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Building & Construction</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Fashion & Textiles</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Technology Arts</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Information Management</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Year 9 Technology</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Year 10 Technology</a></li>
</ul>
</div>
<div id="content">
<h2>Welcome</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<ul id="links">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">View Latest Projects</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Contact</a></li>
</ul>
</div>
</body>
</html>There are a couple of problems with that template:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Technology Web</title>
</head>
<body>
<div id="banner"><h1>Technology Web</h1></div>
<div id="content">
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<ul id="links">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">View Latest Projects</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Contact</a></li>
</ul>
</div>
<div id="menu">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Foods</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Graphics</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Building & Construction</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Fashion & Textiles</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Technology Arts</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Information Management</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Year 9 Technology</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Year 10 Technology</a></li>
</ul>
</div>
</body>
</html>There are a couple of problems with that template:Thanks.Thanks for all the help.
 
You must log in or register to reply here.
Back
Top