Tue, 2005-01-04 21:47
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 !
Tue, 2005-01-04 23:52
#1
[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
Wed, 2005-01-05 12:46
#2
[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 ?
Wed, 2005-01-05 14:31
#3
[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;
}
Wed, 2005-01-05 15:42
#4
[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
Wed, 2005-01-05 16:05
#5
[solved] Help with my redesign please !
Thanks RMFred. I had already checked PositionIsEverything but apparently I missed that article. Thanks for the link !