wyrd_fish
Fledgling Freddie
- Joined
- Dec 27, 2003
- Messages
- 537
here we go again...
- Thread starter wyrd_fish
- Start date
Same with Firebird, as one may expecttRoG said:
It's great that you're using CSS, though, wyrd_fish, well done It's just that sometimes when CSS is used without standards compliant markup (or at least markup with a <!DOCTYPE>) there can be some unexpected results, which is a shame. IE is very capable of adapting to this, rightly or wrongly, whereas Mozilla-based browsers are less willing to compromise.Keep up the good work, though!
Jonty
P.S. I know, IE has around 94.8% marketshare, and less than 0.1% of all sites on the net are standards compliant, but still, it's good to try
tRoG
Fledgling Freddie
- Joined
- Dec 22, 2003
- Messages
- 1,440
Oh, and, before I forget:
The w3schools.com site is really, really good. Their CSS tutorials/reference pages are rather spiffy... 'tis where I learned all my CSS trickery.
Linkage: http://www.w3schools.com/css/default.asp
The w3schools.com site is really, really good. Their CSS tutorials/reference pages are rather spiffy... 'tis where I learned all my CSS trickery.
Linkage: http://www.w3schools.com/css/default.asp
Panda On Smack
Can't get enough of FH
- Joined
- Dec 22, 2003
- Messages
- 1,030
heh, comedy copyright statement:
© Alex Richards 2004 onwards
© Alex Richards 2004 onwards
Clown
Part of the furniture
- Joined
- Dec 22, 2003
- Messages
- 4,292
Well, I liked the logo. I didn't like how the 'body' stretches all the way to the right hand side, nor the little black line on the left of the 'body'. I dunno how to do websites tho, so bleh
http://www.clowneh.nildram.co.uk/web site/
See..? heeehehehee.
http://www.clowneh.nildram.co.uk/web site/
See..? heeehehehee.
Hi wyrd_fish
I've only had a quick gander, so forgive me if this doesn't help, but try removing the 'height:10px' references in #links, #main and #smallprint, together with all references to 'overflow:visible'. Now add 'float:left' to #links, #main and #smallprint and finally 'clear:both' to #spacer.
You should end up with something like:
That's a really ugly hack, I'm afraid, and there may well be a better way to do it. That said, both IE and Mozilla/Firebird should now like the page.
Kind Regards
Jonty
P.S. The reason the backgrounds are behaving like they are is because the background is that of a parent element, and the child elements are floating. When you float an element, you take it out of the normal flow of things, a bit like a 'position:absolute' element. So instead of having ...
... and the background of parent wrapping around <child>, the browser effectively renders it as ...
... thus <parent>'s background acts as if there is nothing there and thus doesn't wrap 'correctly' (techniclly it's correct, but for our purposes it's just annoying ). Hope that isn't too confusing
What the hack does is float the <parent> elements too, thus 'correcting' the wrapping and making the browser render things as ...
... The 'clear:both' property (it turns out to be very useful that you have spacer elements) just stops all the floating elements from merging into one continuous mess.
I've only had a quick gander, so forgive me if this doesn't help, but try removing the 'height:10px' references in #links, #main and #smallprint, together with all references to 'overflow:visible'. Now add 'float:left' to #links, #main and #smallprint and finally 'clear:both' to #spacer.
You should end up with something like:
Code:
body {background-color: #D4E6EA; background-image: url(../img/logoblue.gif); background-repeat: no-repeat; margin-left: 250px; margin-right: 0px; margin-top: 7px; margin-bottom: 7px;}
#links {float:left; width: 100%; background-color: #9EC6CF; padding: 3px; border-left: 1px solid #000000; }
#main {float:left; width: 100%; background-color: #9EC6CF; padding: 3px; border-left: 1px solid #000000; }
#smallprint {float:left; width: 100%; background-color: #9EC6CF; padding: 3px; border-left: 1px solid #000000; }
#spacer {clear:both; height: 7px; width: 100%; font-size: 1pt; padding: 0px;}
#quater {width: 24%; text-align: center; float: left; }
#half {width: 49%; float: left; font-family: arial; font-size: 8pt; }
#half2 {width: 49%; float: left; font-family: arial; font-size: 8pt; text-align: right; }
.title {font-family: arial; font-size: 12pt;}
.main {font-family: arial; font-size: 10pt;}
.main_inset {font-family: arial; font-size: 10pt; text-indent: 15px;}
.med {font-family: arial; font-size: 8pt;}
a:link {text-decoration: underline; font-family: arial; color: #000000;}
a:visited {text-decoration: underline; font-family: arial; color: #000000;}
a:active {text-decoration: underline; font-family: arial; color: #000000;}
a:hover {text-decoration: none; font-family: arial; color: #000000;}Kind Regards
Jonty
P.S. The reason the backgrounds are behaving like they are is because the background is that of a parent element, and the child elements are floating. When you float an element, you take it out of the normal flow of things, a bit like a 'position:absolute' element. So instead of having ...
Code:
<parent>
<child></child>
</parent>
Code:
<parent>
</parent>What the hack does is float the <parent> elements too, thus 'correcting' the wrapping and making the browser render things as ...
Code:
<parent>
<child></child>
</parent>No problemwyrd_fish said:
I've only tested it on the machine I'm on (IE and Firebird, Windows XP) but it seems to work.Just pat yourself on the back for persevering with it. This kind of trouble is one of the main reasons that people get put off CSS (rightly or wrongly) because simple things take unnecessary amounts of time and attention.
Kind Regards
Jonty
P.S. tRog, if you want it, Mozilla 1.6 Final has recently been released.
Yeah, utilising <!DOCTYPE>s can often cause initial problems, but this is only due to the fact that the browser is now (usually) rendering is a standards compliant manner, rather than in 'quirks' mode which happily bends and breaks standards. Given the choice, it's probably better to use <!DOCTYPE>s (indeed your markup won't validate without them) but the bugs they can highlight can be annoying.
Kind Regards
Kind Regards
