CSS - IE & FF ?!?
- Started
- Last post
- 15 Responses
- mg33
I know, there's threads on this.
But I'm at my wits end. The page I'm working on works perfectly in IE, but is all over the place in FF.
2 columns with a header, centered on page. It basically started with the BlueRobot pages.I also have a template from
http://www.csscreator.com/
that works fine in FF.
I'm just having trouble blending the two together to find out what exactly DOES make the CSS layout work in FF.
-------------------------------So, those of you who have experienced this problem, what have your solutions been?
It may be that the header (which is the full width of the desired page, centered, 700px)
is in conflict with the container div that surrounds two left side divs and the main content area to the right.If anyone has any tips on this they would be most appreciated. I may post this to my site as an example but need to take out some work stuff beforehand.
Much thanks. :)
- ScottTheRobot0
Post the page
- ScottTheRobot0
(as it could be any number of things)
- liquid0
thus the reason I stick with table layouts.... cause they work
- versa0
floating left on both of those columns may prove to be your new best friend
maybe not
let us know
- liquid0
hey versa...I saw your post from before...and I was curious cause I checked your source...
where did you start when learning CSS cause that other one you showed was like 100% css/xhtml
- versa0
just from scratch fiddling around, and checking sites like quirksmode.org and blooberry
- liquid0
thanks versa
- ornj0
CSS really isn't that hard and I find it works muchg better than tables for me as well as being much much cleaner.
Instead of getting a layout from someone and hacking it up I woudl suggest starting from scratch and just working your way through it. Good way to learn and at least for me it always makes it easier to find the source of the problems.
- heavyt0
my guess is that you either have a lot of padding, or a lot of relative positioned DIVs.
either is bad.
TR1
- mg330
Alright, I've got the pages posted.
Version 1: The container uses a negative margin (as shown in a Zen Garden example) and actually does center the left menus and content, except when the browser window is made smaller. Then, the areas below the Header are not aligned with the Header)
http://www.mg33.net/work/mgcss1.…
CSS page:
http://www.mg33.net/work/mgcss1.…The particular bit of negative-margin code for the container is:
#container {
padding: -1px 10px 0px;
width: 700px;
position: absolute;
left: 50%;
margin-left: -370px;
text-align: left;
}Second version w/out negative margin:
http://www.mg33.net/work/mgcss1-…CSS for container:
#container {
padding: -1px 10px 0px;
width: 700px;
height:100%;
margin-right: auto;
margin-left: auto;
position: relative;
text-align: left;
}
---------------
Both work fine in IE. The negative margin works in FF except for the offset, noncentered aspect if you shrink the browser down.Anyhow, if someone has a tip I would greatly appreciate it. This page is built off the Blue Planet templates, with modifications. I've just been sinking my teeth into all this for the past week with lots of trial and error but I'm getting the hang of it.
For this page, and site, I want the header, and two columns and a footer to center on the page at all times.
Thanks. :)
- bokswagen0
this might help:
add this to your current style:
body {
text-align: center;
margin: auto;
}
and it might help if you put the header div inside the container div.
- heavyt0
note that the box model is different for IE vs others.
Padding is added to the width of the element in IE. So, 700px + 10 +10 = 720px in IE, every other browser will take the padding from the inside, so 700 = 700.
your math is off too.
half of 700 isnt 370. IE is going to make that DIV 720px, so it should be -360px, all others shoudl be 350px.TR1
- DonDigital0
I'm guessing all is wrong and its not the browsers fault...
I would avoid floating anything in CSS as it is where you will run into all the troubles. Also, make sure you are using a proper XHTML doctype, doing that properly will kick IE into a Quirks mode and allow it to act more like FF.
- mg330
heavyt,
using bokswagen's suggestion, I've switched back from the negative-margin setup.
I had not figured out the container above the header before, just had to reposition the scrolling areas on the left.
- mg330
Thanks alot everyone, I think I've got it working now.
http://www.mg33.net/work/mgcss1.…This is all quite a bit of fun actually. I'm litterally changing things one at a time, and learning alot by seeing changes happen and seeing what works and doesn't.