Cross broswer compliance - vertical spacing
Hi guys,
Hope someone can help. I'm coding a site and can't work out why a small section of text is appearing differently in different browsers. My main problem is with - wait for it - IE7.
Here's the URL: http://www.wsmcms.com/
The problem is with the spacing on the form in the top left corner on the form... "Shop by category, Shop by region, Shop by market".
In FF it displays exactly how I would like it to. Safari and Opera have slightly larger vertical spacing that I can live with. BUT in IE6 & IE7 there is a rather large spacing between the text and the input boxes. Can anyone see in my CSS where I've gone wrong and suggest a possible fix?
TIA
serpico
decibel.places posted this at 00:39 — 27th August 2008.
He has: 1,494 posts
Joined: Jun 2008
Hi serpico,
The problem is that each dropdown has its own form - and different browsers render forms differently.
A quick fix would be to add this to one of your stylesheets:
form {margin: 0;
}
tested and works...
To avoid this problem, I usually try to enclose all form elements within a single set of form tags...
Hopefully you will hang around here some, good people here-
Why don't you post an introduction and tell everybody about yourself?
Welcome to TWF!
serpico posted this at 00:56 — 27th August 2008.
They have: 121 posts
Joined: Aug 2008
Quick and Correct!
Thanks very much! You've solved my problem. I've just been discussing the whole debate of CSS led websites versus table based layout. I'm a big advocate of CSS based table-less layout - it just takes longer to learn it thoroughly. And as such little problems like this come up.
I've got another issue, but I'll start a new thread for it. Thanks again!
serpico
decibel.places posted this at 01:01 — 27th August 2008.
He has: 1,494 posts
Joined: Jun 2008
One more thing...
Inspecting the styles with Firebug I saw the table has
display: table;I am not aware that is a valid value for the display: property but doesn't seem to cause a problem either, probably ignored. Generally I use
display: inline, or block, or none...Tables? I work with a designer who uses Dreamweaver, ugh, not only tables but what the heck is style77?
demonhale posted this at 01:45 — 28th August 2008.
He has: 3,278 posts
Joined: May 2005
And I am a fan of table-less layout and CSS too, I'm glad you got this resolved...
serpico posted this at 02:13 — 28th August 2008.
They have: 121 posts
Joined: Aug 2008
Yeah, display:table is a valid css attribute.
http://www.w3schools.com/css/pr_class_display.asp
I guess the browser assigns that as default as the class is being used on a table tag.
serpico
decibel.places posted this at 03:50 — 28th August 2008.
He has: 1,494 posts
Joined: Jun 2008
Ah i c
funny, though, telling a table to display like a table... guess it doesn't hurt anything
webwiz posted this at 20:45 — 28th August 2008.
He has: 629 posts
Joined: May 2007
Glad your problem is solved, Serpico.
WRT "display: table;" - we could easily have all the benefits of table behavior if only "The World's Favorite Browser[TM]" supported table-related display properties. Many complaints I hear about the "failure" of CSS to replicate the goodness of tables should really be directing their ire at that browser. All other major browsers have long supported these CSS properties.
FWIW - You can sometimes emulate *some* display: table; properties in that browser by giving an appropriate element "layout" -
http://www.satzansatz.de/cssd/onhavinglayout.html
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.