| sunstreak |
| (regular) |
| Thu Mar 17 2005 08:35 PM |
|
cross browsers
|
hi peeps, sorry to be a css pain, i am having trouble getting the same layout in firefox in comparison to IE.
should i be looking to sacrifice part from one to improve the other, or should i create extra files for firefox, if so what code can be used to detect which browser to display in?
Hey man, I guess the gene pool could use a little chlorine!
| paul_lomax |
| () |
| Thu Mar 17 2005 09:12 PM |
|
|
Re: cross browsers
|
Neither - just figure out what browser bug is causing the problem and work around it... Browser detection is a 'bad thing' these days.
Usually problems are due to the Internet Explorer 'box model' being wrong. The standards say that if you have a box that is 500px wide, margin 10px and padding 10px, then it is 500px /including/ the padding and margin. But IE adds the padding on top, making the box 540px wide... Also IE has quite a lot of bugs with padding - so use margins where possible instead.
Have a look at PositionIsEverything
If you get a really annoying bug you can apply a 'hack' where you can put CSS in that only IE can see, so it doesnt break in firefox etc.
If you post your URL I'll have a quick look for you.
Paul Lomax
Internet Technology Manager
IPC Country and Leisure Media
- www.ipcmedia.com
Pick Me Up magazine - Real life as you've never seen it before!
| sunstreak |
| (regular) |
| Thu Mar 17 2005 09:40 PM |
|
|
|
Re: cross browsers
|
Hi Paul, thanks for a quick reply, i have uploaded what i have done so far here.
I am just starting to experiment and have trouble with cross browsing in firefox.
Please bear in mind i only started learning css one week ago and i am in my mid fifties and not as mentally agile as i used to be. So this is not something ready for review (not by a long shot) yet.
I will have a gander at the positioning link thanks.
Hey man, I guess the gene pool could use a little chlorine!
| paul_lomax |
| () |
| Fri Mar 18 2005 11:32 AM |
|
|
|
Re: cross browsers
|
Hey, that's a really good start!
Your problem is indeed the IE box model problem.
You're missing a DOCTYPE which tells the browser what kind of HTML you are using and what mode to put the browser in (standards or quirks)
At the top of the page above the html tag, plus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Using Strict will put IE into Standards mode which means it uses the proper box model. Now your design is the same in firefox and IE6, albiet broken - but easier to fix.
You now need to take padding into account when working out widths and heights - they now /dont/ include padding and borders. Also IE and Firefox have different ideas on what a 'thin' border is, so change that to 2px solid black instead.
So change your header height to 61px (85px - 2x2px border - 2x10px padding) and the widths of your columns to 191px (200px - 2x2px border - 5px padding).
After that your layouts should be pixel perfect and identical in IE6 and Firefox. (They might look a bit funny in IE on the Mac, and IE5.01, but that's a different matter...)
Or you can cheat by using the Layout-o-matic
Oh, and when you want to make your CSS navigation, I can highly recommend the List-o-matic - converts any list (UL / LIs) into a nice navigation bar - horizontal or vertical.
Paul Lomax
Internet Technology Manager
IPC Country and Leisure Media
- www.ipcmedia.com
Pick Me Up magazine - Real life as you've never seen it before!
| sunstreak |
| (regular) |
| Fri Mar 18 2005 12:28 PM |
|
|
|
Re: cross browsers
|
In reply to:Hey, that's a really good start!
aw shucks! 
, seriously Paul thanks for taking time out to check the url, i shall get it sorted after the weekend, me and 'er indoors are going to Newquay in Cornwall for the weekend.
Hey man, I guess the gene pool could use a little chlorine!