Author |
Message |
OllieMaitland
Junior WebHelper
Joined: 06 Dec 2003
Posts: 25
|
Posted:
Tue Dec 09, 2003 3:56 pm (21 years, 1 month ago) |
|
Hi -
I was so impressed with your new site I have been experimenting with CSS as I have always used tables...
I have got everything to work in IE but having issues with the others, I think the problem is pretty elementary and how i have the divs layout. Basically it seems that the height in the CSS isn't doing anything...
Site : http://dev.byng-designs.com/byng/
CSS : http://dev.byng-designs.com/byng/template.css
Any suggestions? |
|
|
|
|
SfCommand
Senior WebHelper
Joined: 10 Nov 2002
Posts: 143
Location: UK
|
Posted:
Tue Dec 09, 2003 4:16 pm (21 years, 1 month ago) |
|
|
|
|
adam
Forum Moderator & Developer
Joined: 26 Jul 2002
Posts: 704
Location: UK
|
Posted:
Tue Dec 09, 2003 7:34 pm (21 years, 1 month ago) |
|
I ran your page throught the validator and there's quite a few errors there - my guess is that if you fix 'em it'll work as you want. You also need to specify a character encoding in a <meta> tag, though I chose one to get the validator to work |
________________________________ It's turtles all the way down... |
|
|
|
OllieMaitland
Junior WebHelper
Joined: 06 Dec 2003
Posts: 25
|
Posted:
Tue Dec 09, 2003 8:18 pm (21 years, 1 month ago) |
|
ah - ok, an embarrasing amount of errors there, i'll correct them and see what prevails... no doubt i'll be back here |
|
|
|
|
OllieMaitland
Junior WebHelper
Joined: 06 Dec 2003
Posts: 25
|
Posted:
Thu Jan 08, 2004 7:07 pm (21 years ago) |
|
|
|
|
adam
Forum Moderator & Developer
Joined: 26 Jul 2002
Posts: 704
Location: UK
|
Posted:
Thu Jan 08, 2004 8:10 pm (21 years ago) |
|
heh, it wants a login...care to plagerize...er, I mean quote the content? |
________________________________ It's turtles all the way down... |
|
|
|
Daniel
Team Member
Joined: 06 Jan 2002
Posts: 2564
|
Posted:
Thu Jan 08, 2004 8:16 pm (21 years ago) |
|
I just visited the link and don't get asked to login... |
________________________________
|
|
|
|
OllieMaitland
Junior WebHelper
Joined: 06 Dec 2003
Posts: 25
|
Posted:
Thu Jan 08, 2004 8:17 pm (21 years ago) |
|
|
|
|
adam
Forum Moderator & Developer
Joined: 26 Jul 2002
Posts: 704
Location: UK
|
Posted:
Thu Jan 08, 2004 9:36 pm (21 years ago) |
|
Quote: | status: Either we require login from users from your ISP because of abuse, or the thread is marked members only. Please login and then back up to view. |
heh, must be NTL...but the google thing worked |
________________________________ It's turtles all the way down... |
|
|
|
SfCommand
Senior WebHelper
Joined: 10 Nov 2002
Posts: 143
Location: UK
|
Posted:
Thu Jan 08, 2004 10:11 pm (21 years ago) |
|
|
|
|
OllieMaitland
Junior WebHelper
Joined: 06 Dec 2003
Posts: 25
|
Posted:
Thu Jan 08, 2004 10:29 pm (21 years ago) |
|
From : Suzy ( http://www.webmasterworld.com/forum83/1725.htm )
Quote: |
Moz is exhibiting the correct behaviour. Floated elements are not in the flow of the document so the parent element doesn't even know it's got any children
the most common way to workaround this previously was to use a "spacer" div:
<div style="clear: both;"></div>
and this needed to be inserted in the HTML before closing the containing div.
However, there is another way to make a parent element "stretch" to contain its floated children elements using CSS only, which to me makes things much neater..
It uses the :after pseudo-element selector to produce "generated content", then clears this "content" using clear: both; (Note: Moz actually requires something in this content field, hence the need to specify line-height and font-size to "hide it" again.)
see this example:
Code: |
CSS:
#container {
position: relative; /* required by NN */
width: 700px;
border: 1px solid #000;
background: #ffe;
margin:0 auto;
padding: 20px;
}
/* the workaround */
/* moz 1.4 requires something in the content field */
#container:after{
content: "."; display: block; line-height: 1px; font-size: 1px; clear: both;}
.leftfloat {
float: left;
width: 350px;
background: #cff;
}
.rightfloat {
float: right;
width: 350px;
background: #cfc;
}
|
HTML:
Code: |
<div id="container">
<div class="leftfloat">...left floated div....</div>
<div class="rightfloat">...right floated div...</div>
</div>
|
IE doesn't support the :after pseudo-element but then it doesn't have to it does what you want (wrongly) anyway!
This should work with your code above fungku..
Suzy
|
|
|
|
|
|
thetribe
WebHelper
Joined: 10 Nov 2002
Posts: 62
Location: Ashington, Northumberland. UK
|
Posted:
Fri Jan 09, 2004 10:42 am (21 years ago) |
|
|
|
|
SfCommand
Senior WebHelper
Joined: 10 Nov 2002
Posts: 143
Location: UK
|
Posted:
Fri Jan 09, 2004 12:05 pm (21 years ago) |
|
|
|
|
|