here we go again...

tRoG

Fledgling Freddie
Joined
Dec 22, 2003
Messages
1,440
I have saved an attachment showing what it looks like on WinXP/Moz1.4

I'm guessing it ain't good.
 

Attachments

Jonty

Fledgling Freddie
Joined
Dec 22, 2003
Messages
1,411
tRoG said:
I have saved an attachment showing what it looks like on WinXP/Moz1.4

I'm guessing it ain't good.
Same with Firebird, as one may expect :( 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 :)
 

wyrd_fish

Fledgling Freddie
Joined
Dec 27, 2003
Messages
537
i'm farily certain that i can fix that with teh overflow tag

EDIT: give me a while, my ftp appers not to want to work

EDIT: fixed my ftp, Norton decided to block it :eek7:

well try this and tell me if its still overflowing...
 

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.
 

Jonty

Fledgling Freddie
Joined
Dec 22, 2003
Messages
1,411
Hi wyrd_fish

It still appears broken for me, I'm afraid. Firebird 0.7 on Windows XP.

Kind Regards
 

wyrd_fish

Fledgling Freddie
Joined
Dec 27, 2003
Messages
537
well then jonty, is there any way you can think of that will strech teh divs rather than overflowing....

overflow: visible; didn't work.
 

Jonty

Fledgling Freddie
Joined
Dec 22, 2003
Messages
1,411
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:


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;}
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 ...


Code:
<parent>
  <child></child>
</parent>
... and the background of parent wrapping around <child>, the browser effectively renders it as ...


Code:
<parent>

</parent>
... 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 ...


Code:
<parent>
  <child></child>
</parent>
... 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.
 

Jonty

Fledgling Freddie
Joined
Dec 22, 2003
Messages
1,411
wyrd_fish said:
thanks jonty i'll try that
No problem :) 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.
 

wyrd_fish

Fledgling Freddie
Joined
Dec 27, 2003
Messages
537
i did have a problem where by teh doctyoe thing caused it to render the whole thing about 2px too wide, so i had to get rid of it...

EDIT: working yet jonty??
 

Jonty

Fledgling Freddie
Joined
Dec 22, 2003
Messages
1,411
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
 

wyrd_fish

Fledgling Freddie
Joined
Dec 27, 2003
Messages
537
well i made teh changes jonty surjested and today, i implimented the articles page...
 

Jonty

Fledgling Freddie
Joined
Dec 22, 2003
Messages
1,411
Hi wyrd_fish

I've just had a quick play, and the overflow problem now seems to have gone (at least in IE6 SP1 and Opera 7.23 on Windows XP SP1a). The content does, however, slightly overlap with the logo now :(

Keep up the good work
 

wyrd_fish

Fledgling Freddie
Joined
Dec 27, 2003
Messages
537
that was diliberate...

someone on W&B compliained that the logo was too big
 

Users who are viewing this thread

Top Bottom