Edit : problems solved ! Thanks !
Hi all,
I need help to redesign my website... Here's the only page I made so far, and I'm already into problems : http://www.chokebore.net/temp/v7/news.html
source code (I've tried to post just the problematic bits)
HTML :
<body> <div id="header"> <h1><a href="http://www.chokebore.net/">chokebore</a>.net</h1> </div> <p id="author"><a href="http://validator.w3.org/check/referer">XHTML</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> : 1998-2005 : <a href="contact.html">Florent</a></p> <ul id="menu"> <li><a href="news.html" id="current">news & updates</a></li> <li><a href="dates.html">tour dates</a></li> <li><a href="newsletter.html">newsletter</a></li> <li><a href="band.html">line-up</a></li> <li><a href="bio.html">biography</a></li> <li><a href="disco.html" title="discography">discography</a></li> <li><a href="gigs.html" title="gigography (concert history)">gigography</a></li> <li><a href="odds.html">trivia</a></li> <li><a href="media.html" title="reviews, interviews, articles...">media</a></li> <li><a href="pictures.html" title="artwork, video stills, live photos, press photos, flyers, posters, t-shirts...">pictures</a></li> <li><a href="audio.html">audio</a></li> <li><a href="video.html">video</a></li> <li><a href="lyrics.html">lyrics</a></li> <li><a href="tablature.html">tablature</a></li> <li><a href="info.html">info</a></li> <li><a href="contact.html">contact</a></li> <li><a href="thanks.html">thanks</a></li> <li><a href="sitemap.html">site map</a></li> <li><a href="links.html">links</a></li> <li><a href="http://www.chokebore.net/forums/">forums</a></li> </ul> <div id="content">
CSS :
div#header { background: #000 url(images/sun-optimized.jpg) no-repeat top; border: 1px solid #000; color: #555; width: 750px; } #header h1 { font: bold 24px verdana, arial, sans-serif; margin: 170px 20px 0 20px; } #header h1 a { background: transparent; border: 0; color: #aaa; } p#author { background: transparent; color: #aaa; font-size: 10px; margin: -16px 20px 4px 20px; text-align: right; width: 710px; } p#author a:hover, p#author a:active { background: transparent; border-bottom: 1px solid #eee; color: #eee; } ul#menu { background: #000; border: 1px solid #000; color: #000; float: left; font-size: 10px; font-weight: bold; list-style-type: none; margin: 2px 0; padding: 8px 10px; width: 730px; } ul#menu li { display: inline; } ul#menu li a:link, ul#menu li a:visited { background: #000; border: 1px solid #000; color: #aaa; float: left; margin: 1px; padding: .2em 1em; } ul#menu li a:hover, ul#menu li a:active, ul#menu li a#current { background: #000; border: 1px solid #aaa; color: #eee; } #content { background: red; border: 1px solid #000; margin: 0; padding: 8px 10px; text-align: justify; width: 730px; }
It looks fine in IE6, of course, but doesn't in Firefox. Bugger.
The #content Div has a red background just for visibility.... In Firefox this Div starts just below the #header Div, I think it's because the #menu Div is floated to left, but I can't find a solution to force #content below #menu (with a 2px margin) ! I've tried to set clear: both for UL#menu but it doesn't work.... Any other suggestions ?
Thanks for any insight !
[solved] Help with my redesign please !
I think it looks better in FF myself
Easy fix for FF
Try adding clear:both; to #content
Don't know what that will do to IE however
[solved] Help with my redesign please !
Seriously ? It looks better the unintended way ?
Anyway thanks for the hint, works just fine...
And it works fine in IE too, can you believe it ?
[solved] Help with my redesign please !
Let me ask a second question regarding my page's header.
Again, it looks perfect in Firefox, but alas, IE behaves weirdly : it seems to double the side margins of floated elements.
Test page here : http://www.chokebore.net/temp/v7/news.html
The site name is enclosed in an H1 tag floated left, and the copyright info is in a P floated right. Both have side margins of 20px, looking good in Firefox, but in IE it looks like the side margins are 40px ! This is no good as I'd like the header text to be aligned with the menu text below...
Thanks for any help !
HTML :
<div id="header"> <h1><a href="http://www.chokebore.net/">chokebore</a>.net</h1> <p><a href="http://validator.w3.org/check/referer">XHTML</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> : 1998-2005 : <a href="contact.html">Florent</a></p> </div>
CSS :
div#header { background: #000 url(images/sun-optimized.jpg) no-repeat top; border: 1px solid #000; color: #555; height: 200px; width: 750px; } #header h1 { float: left; font-size: 24px; font-weight: bold; margin: 170px 20px 0 20px; } #header h1 a { background: transparent; border: 0; color: #aaa; } #header p { background: transparent; color: #aaa; float: right; font-size: 10px; margin: 184px 20px 0 20px; padding-bottom: 2px; text-align: right; } #header p a:hover, #header p a:active { background: transparent; border-bottom: 1px solid #eee; color: #eee; }
[solved] Help with my redesign please !
Haven't had a look but it sounds like the IE double margin bug... search the forum... this question has been asked many times or check here http://www.positioniseverything.net/explorer/doubled-margin.html
[solved] Help with my redesign please !
Thanks RMFred. I had already checked PositionIsEverything but apparently I missed that article. Thanks for the link !