5 replies [Last post]
florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 15 years 4 days ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

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> &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>&nbsp;: 1998-2005&nbsp;: <a href="contact.html">Florent</a></p>

<ul id="menu">
	<li><a href="news.html" id="current">news &amp; 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 !

I'm a perfectionist
and perfect is a skinned knee

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

[solved] Help with my redesign please !

I think it looks better in FF myself Smile
Easy fix for FF
Try adding clear:both; to #content

Don't know what that will do to IE however

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 15 years 4 days ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

[solved] Help with my redesign please !

Seriously ? It looks better the unintended way ? Evil

Anyway thanks for the hint, works just fine...

And it works fine in IE too, can you believe it ?

I'm a perfectionist
and perfect is a skinned knee

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 15 years 4 days ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

[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> &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>&nbsp;: 1998-2005&nbsp;: <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;
}

I'm a perfectionist
and perfect is a skinned knee

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

[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

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 15 years 4 days ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

[solved] Help with my redesign please !

Thanks RMFred. I had already checked PositionIsEverything but apparently I missed that article. Thanks for the link !

I'm a perfectionist
and perfect is a skinned knee