css problem
- Started
- Last post
- 7 Responses
- flashbender0
most typically this can occur when a float is not cleared.
Put a <br style="clear:both" /> and see if that fixes it.
one big issue is that you have the same ID for all of your projects:
div id="projects1"you can easily fix this by making that a class instead of an ID selector.
Also, instead of padding-top, padding-bottom... you can just use:
padding:10px 25px 10px 25px.
the order of that is top right bottom left. this is true of border as well.
I would also recommend rewriting using actual HTML tags instead of custom classes e.g. use an H1 tag instead of "textheader". This not only makes your pages more accessible, but it also makes them more SEO friendly. For more info on this look up semantic markup.
a couple links that deal with IE quirks and CSS positioning:
http://www.positioniseverything.…
http://www.barelyfitz.com/screen…regarding design for old browsers - it depends on your target audience and how much time and effort you wish to spend developing the site... but you can't ignore that IE 6&7 together still account for more than 20% of browsers according to W3C.
also, your code looks overly complicated for what you are trying to do.
- flashbender0
in the simpliest layout, all you need is:
<style type="text/css">
<!--body{
padding:0;
margin:0;
text-align:center;
}
.contentBox{
width:622px;
text-align:left;
margin:0 auto;
}.header {
font-size: 14px;
padding:10px;
margin:0 0 10px 0;
background-color:#CCC;
border:1px dotted #CCC;
width:600px;
}.item {
font-size: 10px;
padding:10px;
margin:0 0 10px 0;
background-color:#F1F1F1;
border:1px dotted #333;
width:600px;
}
-->
</style>
</head><body>
<div class="contentBox">
<div class="header style1">Header</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
</body>
- welded0
Fixed positioning doesn't work in earlier versions of IE. You can either forget about it and add some top margins to your body so the content doesn't end up underneath the header and the page will otherwise work as normal or go for more messy solution... Search for something like 'position fixed ie' and you'll get pages like this one: http://www.howtocreate.co.uk/fix…
- ckentish0
Listen to Flashbender - a lot of good advice there...
ie problems really aren't that scary after a few goes at fixing them - becomes second nature... I know that's not much help for you now though.
- six0
superb!
thanks for your time guys, really helpful...