CSS Problem in Firefox, IE is OK

C

cmosdos

2[H]4U
Joined
Aug 26, 2002
Messages
2,075
I've been working on this for awhile and I've run into a browser compatibility problem (surprise!). Firefox is not centering my menu lines. IE doesn't seem to have problems. I'm new to css and I think the problem might be there. If someone could look at my .css file and the html and give me any ideas as to why firefox isn't centering the lines like IE is, I would really appreciate it!

http://www.wired-pc.com/newsite/wired-pc.htm

You can find all the files here:
http://www.wired-pc.com/newsite/
 
the problem is that you're absolutely positioning the container elements (navtop, navmid, etc) without providing a left: or right: to move them away from the left edge. Frankly, I can't figure out how/why IE thinks centering is appropriate.

Anyway, I'd rewrite to remove the absolute positioning. Centering is then done with
Code: 
margin-left:auto;
margin-right:auto;
 
See, that's what I thought at first. And thats what I did. However, when I remove the position: absolute; it moves the line to the very top of the page. It completly ignores the top: 240px;.

I had a feeling the problem was in the position code... but seems like whatever I try to manipulate it won't work.
 
Can't you put a margin-top to get your top spacing if you take the absolute positioning out?
 
http://theodorakis.net/tablecentertest.html
That above site explains how to center stuff (not just tables) using CSS. The problem is that IE is retarded when it comes to web standards. And currently the standard is css. IE Beta7 is scheduled to come out this summer(05). One of the biggest updates in the new IE is better support for CSS. For now you have to use the IE bug for centering stuff. (text-align:center) Don't ask me why IE actually centers everything when you ask for just text, but it does. Its all explained in the above link.

Good luck.
 
You're making this about 1000 times harder than it needs to be. I went through a did a quick re-write of your code.

http://www.animeguru.com/designs/wired/wired-pc_new.htm

Basically, instead of absolute positioning everything, I made a container DIV and put everything inside it. Also, I made your navigation bar images into one transparent GIF rather than 4 seperate PNG files, dumped the background image in favor of just defining the background color, and a few other things. I think you'll be able to follow it fairly easily.

I do suggest that you resize your header image and the container DIV to ~770px for compatibility with 800x600 screen resolutions, but that's your choice.

You'll have to do some tweaking to get it exactly the way you want (colors, fonts, etc), but its a good start.

Hope it helps you out!
 
Zippeh, didn't work.

Coeus, thanks for the link. Though, the problem I was having was in firefox. IE centered fine. Still good info.

animeguru, thanks! more than I expected. I spent a few hours going over your code and comparing it to mine to learn how you used things differently. I think I've gotten a good hold of it, but there's a couple things I'm not able to figure out.

1) The nav links aren't centered. There is more space on the left than on the right. Looks like its coded to align center. I've tried a lot of different things and haven't had any luck. My origional was centered so I was going back and forth trying to figure out why your didn't. Maybe I'm being too anal? lol

2) My origional had the footer spaced slightly below the body. I know how I did mine with the spacing... but with yours I can't seem to get it to move away from the body.

Again, no major problems... just small things that I want to try and tweak. Can you give me any ideas on this?
 
cmosdos said:
...but there's a couple things I'm not able to figure out.

1) The nav links aren't centered. There is more space on the left than on the right. Looks like its coded to align center. I've tried a lot of different things and haven't had any luck. My origional was centered so I was going back and forth trying to figure out why your didn't. Maybe I'm being too anal? lol

2) My origional had the footer spaced slightly below the body. I know how I did mine with the spacing... but with yours I can't seem to get it to move away from the body.

Again, no major problems... just small things that I want to try and tweak. Can you give me any ideas on this?
Click to expand...



Answer #1
I wasn't paying attention when I did the original code and hadn't noticed that the nav links were slightly off center. It's because they're in an unordered list rather than just a bunch on links. I added them to a list because it's a bit easier to manipulate into various other layouts, I've grown accustomed to it. You could do without it, but I think it's better especially since down the line you could redesign the whole site just by editing the CSS file.

Anyway, to correct it, just add the following in the appropriate place.

Code: 
#navigation ul
  {
    padding: 0;
  }

That'll eliminate the bit of space that the UL tag was adding before the first LI. Even though it is just a defining tag, it takes up a bit of space unless you tell it otherwise. The zero padding will eliminate that.



Answer #2
The reason the footer is attached is because it is embedded within the container DIV. If you try to just bump it down a bit with either the margin or position:relative / top attributes, the 'body' will just extend down to meet it.

You have two options here.

Option 1
You'll have to move it out of the container DIV to have it seperate. Just take it out of the container and place it just below. However, doing so means you'll need to make some CSS changes.

Code: 
#footer
  {
    position: relative;
    top: 25px;
    margin: 0 auto;
    width: 850px;
  }

The position:relative combined with the top distance will bump your actual footer down below the body. You'll have to play with the distance to get it to your liking, but keep in mind that it won't be exactly the same across every browser... but it should be fairly close.

The margin: 0 auto will center it in standards compliant browsers (i.e. everything but IE which will still use the text-align:center from the body element at the top of the CSS)

And the width is self evident, you'll need to tell it to be whatever size you want, though I assume its 850px just like the rest of the page. ;)

Option 2 (the better option, IMHO)
You can leave the footer inside the container DIV, but make the following changes to the CSS.

Code: 
#footer
  {
    position: absolute;
    clear: both;
    left: 0px;
    margin: 10px 0;
    width: 850px;
  }

Okay, here the position:absolute tells the browser that the footer is no longer a part of the regular page, it isn't affected by the rest of the layout. Combined with clear:both tells it that even though it isn't normally affected by the rest of the layout, it should come after everything that was rendered before it was (everything above it in the HTML).

You need the left:0px attribute for IE, otherwise it'll actually start the footer at the center of the page and extend it from there towards the right side of the page whatever distance you define. Long story short, this is because of the text-align:center attribute in the body, but you'll want that to center in older browsers (IE 5.x). As such, you need this.

Now, that will still leave it looking 'attached' even though it really isn't. Here you need to define a margin for it to bump it down. You cannot use the 'top:distance attribute here because it will override the clear:both and put the footer X distance from the top of the browser window. By defining a margin, you can alter its position relative to the body. In my example above, it puts 10px on the top and bottom, and 0 on the left and right. You could use 'margin: 10px 0 0 0' if you wanted, but shorthand makes for clear code and it doesn't really matter if there is a margin below it, nothing follows the footer anyway.

Finally, you need to define the width since its not affected by the rest of the page. If you don't, it'll only be as wide as it has to be to fit the text. As such, width:850px.


I hope that helps to cleat it up a bit. If not, please ask and I'll do my best to answer.


Oh, some other things I noticed that I missed before.

1. No DTD!!! It looks like you're going XHTML transitional, so I added the appropriate doctype and meta tags. Yes, serving it as media 'text/html' is fine, don't let anyone tell you it has to be 'application/xhtml+xml' that's only required for XHTML 1.1 or 1.0 strict... 1.0 transitional is completely valid as text/html. ( link ) Besides, application/xhtml+xml generally fucks up everything in almost every current browser.

2. Take out the following line.

Code: 
#frame p
  {
    position: relative;
  }

It is completely unnecessary and I can't believe I added it in in the first place. ;)

3. The 'navlinks' DIV is also unnecessary. Just remove the opening (<div id="navlinks">) and corresponding closing (</div>) tags for that ID. You don't need them, but they won't really hurt if you feel like leaving them in.

Good Luck!
 
Thanks again animeguru. The footer makes sense. I kept trying to use the top:distance code and it wasn't working. This makes more sense. The nav links are still a problem though. I haven't been able to get them to work with the padding: 0;. Doesn't look like their centered on your site either. Why would a tag put a space there? I thought they never affected the spacing. Do I need to use links instead of the list?

Another question... Can you put links directly into the CSS? So if I wanted to change the name or number of links, I could just edit the CSS file, and not all of the .htm's? If that's possible, I would much rather just put the links in the CSS to help with maintence/changes in the future.

Thanks again for all the help.
 
cmosdos said:
Thanks again animeguru. The footer makes sense. I kept trying to use the top:distance code and it wasn't working. This makes more sense. The nav links are still a problem though. I haven't been able to get them to work with the padding: 0;. Doesn't look like their centered on your site either. Why would a tag put a space there? I thought they never affected the spacing. Do I need to use links instead of the list?

Another question... Can you put links directly into the CSS? So if I wanted to change the name or number of links, I could just edit the CSS file, and not all of the .htm's? If that's possible, I would much rather just put the links in the CSS to help with maintence/changes in the future.

Thanks again for all the help.
Click to expand...


Add...

Code: 
margin: 0;

... also, that should take care of it. It was centered in Firefox, but not IE. That'll take care of both (in conjunction with padding: 0; )


As to the links in CSS, no you can't. CSS is only for style, it isn't for markup. You'd want to use something like server side includes which would require a server scripting language like PHP.

It is fairly simple, but I dunno if you're looking to go that far with this page. If you do want to, you'd need to create .php files instead of .html and you'll want to edit your .htaccess file as well.

LMK if you want me to show you how to do it.
 
That worked... but now, the text in the body is centered in IE, but justified (how its supposed to be) in firefox. Its completly ignoring the text-align: justify; in the #frame div. Damn you IE!

As for the php... I've never done anything with it before. Do you still use CSS with it or is it something completly different?

Edit: If I remove the text-align: center; from the body, the #fram picks up the text-align: justify; and the test is correctly justified. But then the nav links are not centered (left). I tried adding the text-align: center; to the nav links but no go. Why must IE be so damn anal.

Edit #2: I fixed the text alignment problem. Had to put text-align: justify; in the #frame p div. One thing I hadn't noticed before is that now text in the body is correctly spaced (margin: 15px 50px;) at 15px at the top, but not at the bottom. When using this type of syntax, the 15px should cover both the top and the bottom, correct? I tried separating it out and couldn't get it to work either. The text just seems so close to the bottom of the box.
I tried adding height: distance; to the frame div, and although that worked, it won't be accurate for each page and I think there needs to be a padding or different margin code or something. I haven't been able to get anything to work. Seems like as soon as i put one fire out, another one starts up.

Oh... almost forgot... the margin: 15px 50px; actually works correctly in IE. It puts the 15px at the bottom of the text box. But its not working in Firefox.
 
Okay, I decided to leave the footer attached. I also changed the size to 770 as you suggested to be 800x600 compatible. The only problem I'm running into now is that in IE, not all of the page is showing. I know it loads properly because in higher resolutions everything shows up. But, in 1024x768, you can only scroll down to near the bottom of the text box. Can't see the rest of the page.

As usual, this problem does not occur in firefox.

site:
http://erkanandamanda.wired-pc.com/
css:
http://erkanandamanda.wired-pc.com/style.css

Edit: Okay, I can get IE to scroll and show everything if I use the code to 'detach' it from the body, but just use a 0 margin so that it actually doesn't move down. Seems that IE isn't liking the relative position for the footer and when I use that and remove the other added code (or leave it there, doesn't make a difference) it won't show the footer.

But, firefox does use the relative position correctly and doesn't have a problem. However, when I use the above mentioned way to get IE to properly show the page, now I'm having the same problem in firefox with the margin at the bottom not showing up. The text runs all the way down right to the footer.

Do you know how to either a) get IE to properly show the page using the relative position for the footer (i'd prefer this cause I think this is how its supposed to be coded, yes?) or b)get firefox to allow the margin space when using the absolute position on the footer.
 
You must log in or register to reply here.
Back
Top