Old Problem (but with a new twist)

Forum Moderators: not2easy

Message Too Old, No Replies

Old Problem (but with a new twist)

shadowzombie

11:34 pm on Oct 17, 2007 (gmt 0)

Here is an old problem that I've seen posted about on a lot of forums. It's the 100% width div, but my problem has a new twist with it. Well it started out normally, with IE not doing a full browser width div. So I did a google search and found a fix. It looked fine on my computer, but when I went to upload it to my website, IE went back to not covering the browser width with the div (about 90%-95% if i had to guess). I would like to know how I could go about and fix this problem. Here is my nav code.

Thanks in advance for your help.
**NOTE** I didn't post my full nav code with all the links to save space, but that is all there is in it.

Marshall

11:58 pm on Oct 17, 2007 (gmt 0)

shadowzombie

Welcome to WebmasterWorld

You should add to your CSS

body {
margin 0;
padding: 0;
}

This will set uniform window margins which otherwise vary from browser client to browser client.

Marshall

shadowzombie

8:02 pm on Oct 18, 2007 (gmt 0)

I already have that in my CSS. That was the original fix I was referring to when I said it was working fine before I uploaded it onto the web.

londrum

8:11 pm on Oct 18, 2007 (gmt 0)

your div has got a table inside it, so i would guess that the div is 100%, but the table isn't.
try removing the margins on the table.

or try giving the div and table different background-colors, to see how much space they each fill up.

Marshall

9:19 pm on Oct 18, 2007 (gmt 0)

What doctype are you using?

Marshall

shadowzombie

12:44 am on Oct 19, 2007 (gmt 0)

As for the table reply, the table only fills up about 40% of the div. Which it should because I only have 5 links in it. And if it matters, they are CSS rollover links. Giving the table no margins didn't do anything. Here is the doc type I am using.

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

encyclo

12:56 am on Oct 19, 2007 (gmt 0)

Irrespective of the doctype, in this instance specifying a zero margin and padding for the

body

element (as suggested by Marshall above) fixes the problem when using the limited test case you mention.

So the problem will probably lie elsewhere. What other CSS rules apply to this section? Does your markup and CSS validate?

HTML validator [validator.w3.org]
CSS validator [jigsaw.w3.org]

Marshall

4:51 am on Oct 19, 2007 (gmt 0)

Strict dtd is not really meant to be used with tables. You may want to read this thread [webmasterworld.com].

Marshall

penders

9:04 am on Oct 19, 2007 (gmt 0)

I already have that in my CSS. That was the original fix I was referring to when I said it was working fine before I uploaded it onto the web. (refering to IE)

Does it work OK in FF, locally and when uploaded?

Are you using a separate stylesheet? Assuming the files have uploaded OK, it is possible the old stylesheet is stuck in IE's browser cache, so you are not seeing the updated styles. Clear your cache and hit Ctrl+F5.

shadowzombie

2:49 pm on Oct 19, 2007 (gmt 0)

Irrespective of the doctype, in this instance specifying a zero margin and padding for the body element (as suggested by Marshall above) fixes the problem when using the limited test case you mention.
So the problem will probably lie elsewhere. What other CSS rules apply to this section? Does your markup and CSS validate?

I don't know if this effects anything, but the only thing that doesn't validate is the little bit of code at the end that the server puts in itself. I don't think there is anyway to remove it, so if that is what is causing my problem, then I guess I have to re-think a nav layout. The only other CSS rules I'm using for my navigation section, is a semi-transparent background. So I had to use the AlphaImageLoader code, since old versions of IE don't support transparency.

Strict dtd is not really meant to be used with tables. You may want to read this thread.

After reading that thread, I changed my doctype to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">. I think that's the one I want to use since I'm using a table, which has images in it.

Does it work OK in FF, locally and when uploaded?
Are you using a separate stylesheet? Assuming the files have uploaded OK, it is possible the old stylesheet is stuck in IE's browser cache, so you are not seeing the updated styles. Clear your cache and hit Ctrl+F5.

In FF it looks just as it should. Though the only problem that does come up sometimes is when an ad pops-up on my page and it loads half off to the right, when FF puts in the scroll bar so you can see the rest of the ad, the nav bar doesnt fill the extra space that is created due to the ad. I've also tried clearing IE's cache and refreshing, but it still doesn't look any different, nav bar is only covering 90%-95% of the page.

Marshall

3:03 pm on Oct 19, 2007 (gmt 0)

Since your table is enclosed in a <div>, why not use ul for your navigation. Below is a sample code that is cross-browser friendly. Just change the colors and width to suit your needs.

Marshall

CSS

#top_nav_bar {
width: 900px;
height: 50px;
margin: 5px 0;
padding: 0;
font-size: 15px;
line-height: 50px;
color: #FFF;
text-align: center;
background-color: #FFF;
}
ul#top_nav {
width: 900px;
margin: 0;
padding: 0;
list-style-type: none;
}
ul#top_nav li {
font-size: 15px;
line-height: 50px;
text-align: center;
display: block;
float: left;
}
ul#top_nav li a, ul#top_nav li a:visited {
width: 149px;
height: 50px;
margin-left: 1px;
color: #FFF;
text-decoration: none;
background-color: #EC0034;
display: block;
}
ul#top_nav li a:hover {
color: #FFF;
background-color: #F8B208;
}

HTML

shadowzombie

1:17 pm on Oct 23, 2007 (gmt 0)

I think that might work. Is there a way I can set the width large and have it auto shrink if the browser is shorter than that so it doesn't scroll? I've tried using overflow:hidden, but it does the same thing of shortening it to only 95% of the width.

Marshall

5:53 pm on Oct 23, 2007 (gmt 0)

You could set width using % or em so they are fluid, just remember not to exceed 100%. Not only do you have to take the width of the individual element into consideration, but also the margins, padding and borders.

Marshall

shadowzombie

8:35 pm on Oct 23, 2007 (gmt 0)

That still didn't work. I used the code you posted Marshall. I changed margins and paddings to 0px, but when I put in 100% width I got back to what I had with my original code. Only a 95% browser width nav bar in IE. The closest I did manage to come to a 100% nav bar was using <table width="100%">. That got me only a few pixels off from perfect, though the right hand side was a little bit more off than the left. If I can't find a fix to get my 100% nav bar, I may just use that table code since its the closest I've come to what I want.

shadowzombie

2:18 pm on Oct 31, 2007 (gmt 0)

I apologize for the double post, but since I can't edit my old post I had to make a new one. I just wanted to let you people know, that I managed to figure out how to get my 100% nav bar. I used width:1024px. This takes care of browers that have that width. For browsers that are using a smaller width I used <body style="overflow-x:hidden"> which stopped a scrollbar from being produced. Since I have all of my content within a set limit, I don't need a scroll bar. Just thought I'd update you guys on my problem. Again thanks for all of your input. Just a quick question that I may need to fix with this way. Are there any other common/bigger widths that user put there screen resolution at? Should I just put a really huge width just to be safe?

HOTmike

3:12 pm on Oct 31, 2007 (gmt 0)

I would advise, strongly, against any assumption that you know which width your page is displayed in.
One issue is that though certain widths are more frequest than others (I think 1280 px width the current standart), there will always be cases of completely non-standard screen resolutions.
Another issue is that you cannot assume your visitor's browser window is maximized (unless you make it so, and that will probably annoy the visitors who have a reason for not having it maximized).
You could test the browser window's "innerwidth" value and use that, but you will have to watch for window resize and opdate your style on the fly.
If you want an element displayed as 'variable width', don't use a 'fixed width' method. It will inevitably fail when a visitor does something unexpected.

shadowzombie

9:05 pm on Oct 31, 2007 (gmt 0)

Well do you have a sample code of what I may use to get what I want and avoid running into problems with users having minimized browers, ect? Like I said I've tried everything else to get this to work and this is the only thing that gets me my desired result. I am willing to edit my code if you will give me some sample code that will work much better.

HOTmike

12:43 am on Nov 1, 2007 (gmt 0)

Yes, oops, innerwidth wouldn't be uniform, either. I read up on it.
Here's my suggestion, though, we're going outside the bounds of css.

Give your div an id to reference it (I've used 'o' in this snippet), add the following in your 'body' tag:
onload="document.getElementById('o').style.width=document.body.clientWidth"
onresize="document.getElementById('o').style.width=document.body.clientWidth"
Tested in IE7, FF, Opera, and should be IE4 compatible.

shadowzombie

1:56 pm on Nov 1, 2007 (gmt 0)

That code works, but there is one little thing that is messing up. My nav bar does span the whole page, but for some reason it's adding a scrollbar, where its letting it scroll even though there is nothing to scroll for. This in turn adds a little extra space that the nav bar doesn't fill. I don't think it's that big of a problem because I would think people wouldn't scroll if they see everything that is there. But I was wondering if there was a fix to this "bug" in your code.

HOTmike

3:37 pm on Nov 1, 2007 (gmt 0)

Sounds like there's 1 or 2 px of width being used by something else, too little be really visible, but enough to cause the scroll; I'd say border but that's just a guess.
try this:
document.getElementById('o').style.width=(document.body.clientWidth-1)
or -2 or -3 if the scroll still shows up, or do your original overflow:hidden to supress it, it shouldn't cause any problems now that it's based of the actual width instrad of a guess.

shadowzombie

11:10 pm on Nov 1, 2007 (gmt 0)

I found a fix that works. I was using a div and putting the table inside the div. Instead of that, I got rid of the div and used the styling on the table itself and it fixed it. Thanks again to everyone who replied and a really big thanks to Hotmike for that code that finally fixed it.