css problem
- Started
- Last post
- 7 Responses
- six
hi folks.
i'm learning css and dreamweaver cs4. i'm designing a site for an artist friend of mine and wanted to use fixed positioning for the header. works great in firefox, safari and latest version of IE but not version 7, where the projects shift up to the top of the page underneath the header (which is obviously no good) any ideas? or am i best off not using this fixed idea? is it best to assume that a lot of people have older browsers or should i just go ahead and design for new browsers? what do you guys do?
the site isn't there yet in terms of design, i'm just trying to get the layout sorted. any advice would be helpful...
thanks
- 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...