1. Home
  2. Forums Index
  3. Browser Side / HTML 11:06 am May 1, 2026

Forum Moderators: open

Message Too Old, No Replies

Site is wider in IE than in FF

         

renet

3:32 pm on Oct 22, 2008 (gmt 0)

10+ Year Member



On FF the site looks fine. IE6 and 7 it is centered to the right so that the horizontal nav bar looses a link and it drops down below the nav bar and other text can't be seen on the right of screen.

Here is the css:

body { margin:1px; font-size:1.0em; line-height:20px; background-color:#000000; font-family: "Trebuchet MS", "Myriad Pro", Arial;}
a { color:#ffffff;}
a:hover { text-decoration:none;}
#container { width: 1100px; margin-top: 0; margin-right:auto; margin-left: auto; }
#headline {color: #666666; font-size: 14px; text-align: right; margin: 0 20px 0 0; text-transform:uppercase}
#headline h1 {
font-size: 12px;
margin-right: 10px;
color: #666666;
line-height: 13px;
display: inline;
}
#header { margin:5px 0 0 0; }
#logo { padding:0px 20px 0px 1px; text-align:right; margin-left: 50px; margin-top: -45px;}
#logo a{color:#FFFFFF; text-decoration:none; font-weight:bold; height:45px; font-size:30px; text-transform:uppercase; outline-style:none;}
#logo a:hover { }
#sitelogo { z-index: 1; float: left; margin-top: -58px; _margin-top:-65px; margin-left: 20px; }
#logo-line { background: url(http://example.net/wp-content/uploads/backgrounds/line2.jpg) no-repeat; height: 70px; width: 1004px; z-index: -1; position: relative; top:98px; left: 55px; }
#tagline { color:#FFFFFF; font-weight:normal; font-size:15px; text-transform:uppercase;}
#menu { width:825px; position: relative; top:-38px; _top: -55px; left:88px; height:25px; clear:both; background-color: #333333; padding: 1px 0 15px 0; _padding: 08px 0 0 0;}
#menu ul {
margin-top: 0;
padding-left: 20px;
padding-right: 5px;
_padding-left: 0px;
_padding-right: 5px;
list-style: none;
text-align: left;
}
#menu ul li{ display:inline; outline-style:none; width:100px; line-height: 32px; font-size:16px; margin: 0 19px 0 0; _margin: 0 7px 0 0;}
#menu a:hover{color:#E6E6FA; text-decoration: none; outline-style:none;}
#main { width:100%; width: 1000px; margin: -35px auto 0 auto; _margin: -72px auto 0 auto; _padding_left:15px; }
#content { margin:5px; padding:0px; width:902px; padding:50px 50px 50px 50px; _padding:70px 50px 50px 50px;
background:#000000 url(http://example.net/wp-content/uploads/backgrounds/gradient2.jpg) repeat-x; color:#ffffff; }
#content {margin-left:auto; margin-right:auto; margin-top: 5px; margin-left: 5px; _margin-left: 12px;}
#content h1 { padding: 40px 0 15px 0; margin:0; text-transform:uppercase; font-size:1.5em; color:#ffffff; width:500px; padding:5px; margin-top:-55px;}
#content h2 { margin: 30px 0 10px 0; text-transform:uppercase; font-size:1.5em; color:#000000; background:#000000; width:950px; padding:5px; margin-top:20px;}
#content h2 a { color:#ffffff; text-decoration: none;}
#content h2 a:hover { color:#ffffff;}
#p.spaced {margin-bottom: 2em;}
#p.spaced3 {margin-bottom: 3em;}
#p.spaced4 {margin-bottom: 6em;}
#content p { padding:0 0 5px 0;}
#.centered { text-align: center; margin-left: auto;
margin-right: auto;
}

.entry p { margin: 10px 0 0 0;}
.date {float:right; font-size:11px;}
#footer {background:url(images/) repeat-x #000000 0 2px; height:100px; border-top:2px solid #000000;}
#left_footer { float:left; padding:40px 0 0 30px; text-transform:uppercase; color:#000000; font-weight:bold; font-size:11px;}
#left_footer a { color:#FFFFFF;}
#right_footer { float:right; padding:40px 30px 0 0; text-transform:uppercase; color:#FFFFFF; font-weight:bold; font-size:11px; text-align:right;}
#right_footer a { color:#FFFFFF;}
.navigation { text-transform:uppercase; font-size:11px; margin-top: 20px; color:#ffffff; background:#000000; width:750px; margin-top:20px; padding:0 5px 0 5px;}
.navigation a {color:#ffffff; text-decoration:none; font-weight:bold;}
.navigation a:hover {color:#193441;}
blockquote { font-style:italic; border-left:3px solid #D1DBBD; padding-left: 5px; margin-left: 20px;}
code { line-height:normal; font-size:12px;

Here is source code of ie7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.example.net/TR/html4/strict.dtd">

<html xmlns="http://www.example.net/1999/xhtml">
<head profile="http://example.net/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Business Name &raquo; Welcome</title>

<meta name="generator" content="WordPress 2.6" /> <!-- leave this for stats -->

<link rel="stylesheet" href="http://example.net/wp-content/themes/neutral/neutral/style.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="Business Name RSS Feed" href="http://example.net/feed/" />
<link rel="pingback" href="http://example.net/xmlrpc.php" />

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://example.net/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://example.net/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 2.6" />

<!-- all in one seo pack 1.4.6.14 [-1,-1] -->
<!-- /all in one seo pack -->

<!-- Protected by WP Plug-in name v1.9.6.7 :: JS BEGIN -->
<script type="text/javascript" src="http://example.net/wp-content/plugins/wp-plug-in/js/wpsf-js.php"></script>
<!-- Protected by WP Plug-in name v1.9.6.7 :: JS END -->

<!--[if lte IE 6 ]>
<style type="text/css">
#menu ul {width:710px;}
#header img {
padding:10px 0 15px 0;
}
</style>
<![endif]--><meta name="verify-v1" content="uATnzJzZw6q39aClvNzoxRvvzqTry/lfP3sDM9Sr9Vw=" />
</head>
<body>

<div id="container">

<!-- header -->
<div id="header">

<div id="headline"><h1>Business Type - Cityname, State ¦ Welcome</h1></div>

<div id="logo-line" >
</div>

<div id="sitelogo">
<a href="http://example.net/">
<img style="border: 0" src="http://example.net/wp-content/uploads/header2.gif" alt="home" />
</a>
</div>

<div id="logo">
<a href="http://example.net/">Our Products</a>
<div id="tagline">
For Sale </div>
</div>


<center><div id="menu">
<ul>
<li><a href="http://example.net/">Welcome</a></li>
<li><a href="http://example.net/directory-1/">Directory 1</a></li>
<li><a href="http://example.net/directory-2/">Directory 2</a></li>
<li><a href="http://example.net/directory-3/">Directory 3</a></li>
<li><a href="http://example.net/directory-4/">Directory 4</a></li>
<li><a href="http://example.net/directory-5/">Directory 5</a></li>
<li><a href="http://example.net/directory-6/">Directory 6</a></li>
<li><a href="http://example.net/directory-7/">Directory 7</a></li>

</ul>
</div></center>
</div>

<div style="clear:both;"> </div>

<!--end header -->

<!-- main -->
<div id="main">

<div id="content">

<div class="post" id="post-111">
<h1>Welcome</h1>
<div class="entry">
<p style="text-align: center;"><em><span style="font-size: x-large;">Buildings As Low As $57.00 Square Foot!</span></em></p>
<p style="text-align: center;">
<p><img class="aligncenter size-full wp-image-112 " title="custom-home" src="http://example.net/wp-content/uploads/2008/08/custom-home.jpg" alt="" width="875" height="444" /></a></p>
<p style="font-size: 2em; text-align: center; font-family: times new roman; line-height: 30px; letter-spacing: .1em; color:#C0C0C0">BUSINESS NAME</p>
<p style="font-size: 1.2em; text-align: center; font-family: arial; line-height: 30px">text text text text text text text text text text<br />
text text text text text text text text text text text text text text text<br />
text text text text text text text text text text text text text text text<br />
text text text text text.</p>
<p style="font-size: 1.2em; text-align: center; font-family: arial; line-height: 30px">text text text text text text text text text text text text text text text<br />
text text text text text text text text text text text text text text text</p>
<p style="font-size: 1.2em; text-align: center; font-family: times new roman; line-height: 30px; color:#C0C0C0">
text text text text text text text text text text<br />
text text text text text text text text text text<br />
text text text text text text text text text text<br />
text text text text text text text text text text</p>

</div>
</div>

</div>
</div>
<!-- end main -->

<!-- footer -->
<div style="clear:both;"> <p> &nbsp; </p> </div>

<div id="footer">
<div id="left_footer">
</div>
<div id="right_footer">
WebSite Design by <a href="http://www.example.net" title="Website Design">Company Name</a>
</div>
<!-- 13 queries. 0.604 seconds. -->
</div>
<!-- end footer -->

</div>

</body>
</html>

I know there are lot's of top notch coders here and I look forward to your excellent examination and analytics of this issue.

Regards

[edited by: tedster at 5:35 am (utc) on Oct. 23, 2008]
[edit reason] change formatting, remove specifics [/edit]

renet

8:10 pm on Oct 22, 2008 (gmt 0)

10+ Year Member



I think I need to clarify:

I would like the site to be viewed with 1024x768 and above resolution.

So, that when viewing from all major browsers: FF and IE7 and IE6 the site looks centered and not needing to use the scroll bars to view the entire site.

would this be called: liquid sizing or fixed width sizing? And what fixes should I employ to make mine work correctly?

regards

alt131

1:48 pm on Oct 24, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Renet,

Good to see this code back for refinement.

The code indicates you are wanting "centred fixed width". That's the intent of the div#container which has a width set by px, plus auto margins left/right.

One way to stop the link "drop" is to apply 

white-space: nowrap;
to 
#menu ul
(for FF) and 
#menu ul li
(for ie). However, this is a "hacky" fix that won't assist the width or positioning issues. To get those resolved without adding "hacky fix" to "hacky fix", what I suggest is that you first address the very basics:

  • Match your doctype to your code. This markup started as xhtml, and is using those coding conventions, but now as html strict. The forum library has a thread on choosing the right doctype for your purpose.
  • Validate your html to resolve things like that stray </a>
  • Shift all your inline styles into your external css. I realise inline styles were suggested by a poster in another forum, but they make it more difficult when sorting through code issues because they create a second place to "look".
  • Decide one way to deal with ie - and stick to it. Currently you are using conditional comments (in my opinion, good), plus the underscore hack. That means two places to look for ie specific issues. Make it easy - use one method.
  • Consolidate your css. For example, you have two rules for div#content. Make them into one. Then remove style rules that are not used in the example code.
  • Validate the css, and pay especial attention to "redefinitions". For example, div#main has a width of 100%, then a redefinition of width to 1000px. div#content has the left margin defined three times, plus a fourth dimension for ie via the underscore hack.
  • Move all rules to the highest element. For example, the main colour for text seems to be white. You might set that on 
    body
    and that will reduce the number of times it is declared in the rest of the code.

Once you're done, post back the "examplified" code.

While that might seem like a lot of work, it won't take a great deal of time. It will allow the positioning issues to be dealt with without the complication of browser interpretations of invalid html and css, accumulating declarations, etc. Plus there will be a lot less code and that will make it easier to address the layout issue, as well as the more technical issues (like redundant z-index's, multiple uses of H1, and a bit of "div-itis"), which are often "trickier" when first starting.

renet, I know this code has been a struggle across several weeks - but my opinion is that the layout issue is quite simple - as should become obvious once the basic code issues are addressed as suggested.

renet

4:00 pm on Oct 27, 2008 (gmt 0)

10+ Year Member



Ooooo....this is good!.. will be emailing to the fellow helping with my site.

Thanks!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 11:06 am May 1, 2026