Re: [css-d] Almost have it...except!!!!
Dave Pierce wrote: OK the home page almost works...well it does in all 5 of my Mac browsers, and even in Firefox for PC, but of course it doesn't in IE/Win. Just one more thing to fix, and I'll be daed if I can find the problem. I beseech you to take a look at http://www.lorettosedgwick.org and see if there's a missing closure, No, there's one too many. Right before the voice-family fudge, after the width value. Both instances :-) After taking those two out, there's still the problem of the entire linksbox overlapping the line above it though, which is caused by the top value of 35px on #content. -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Almost have it...except!!!!
Dave Pierce wrote: http://www.lorettosedgwick.org The lower three lists should be going across the page instead of going vertically down the page. Even the CSS and HTML validate :-) Validate the css and the lists will jump into place in ie. Dave ~dL -- http://www.dlaakso.com/gustave/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Almost have it...except!!!!
David Laakso wrote: Dave Pierce wrote: http://www.lorettosedgwick.org The lower three lists should be going across the page instead of going vertically down the page. Even the CSS and HTML validate :-) Validate the css and the lists will jump into place in ie. Dave ~dL My bad. Nah, that won't fix it.Someone with a brain will come along and offer the correct fix. ~dL -- http://www.dlaakso.com/gustave/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] VisualisingCSSusingVRML
Hi I added http://css-discuss.incutio.com/?page=VisualisingCSSusingVRML but I guess I need to announce the page on here for anyone to know about it... For your convenience, here's the text of that page: Anyone know of a way to generate a VRML model of a CSS design? Some css models are really hard to grok the structure of. I want a way to decompose them so I can quickly understand the layout relationships It wouldn't be so hard. Model the absolutes, the floats, display them as a three d stack of overlapping planes. Tie them together with vectors showing offsets. Ignore all stylistic attributes. Perhaps it could be a summer of code project? Thanks, Martin -- [EMAIL PROTECTED] MSc MBA __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Almost have it...except!!!!
http://www.lorettosedgwick.org
The lower three lists should be going across the page instead of going
vertically down the page.
Even the CSS and HTML validate :-)
http://www.dlaakso.com/gustave/
Does this help?
1. add clear: left to .lowerlinksbox to arrange divs down the page.
2. add .lowerlinksbox ul { display:inline } to change list to horizontal.
3. add float:left to .lowerlinksbox li
4. change .lowerlinksbox width to 100%
I did not have time to complete the solution and edited the css via FF web
dev extension - but this may put you on the right track?
__
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Text over image in IE
Hello. Look here: http://pripisa.sk/stranka/oddych-vo-vode/ ... why is the text over image in IE? In FF is everything allright. Can my anyone help? Thanks, Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Making a mess, navigation and footer weirdness.
Not sure what I'm doing wrong . As suggested earlier I've removed the heights from the content1 and content2 divs but the side nav is still off (except for IE). Also the footer doesn't seem to want to move. Relevant page: http://pamshop.com/Template1/exp8.html# Navigation css: http://pamshop.com/Template1/exp8_side_nav.css Other classes and div css: http://pamshop.com/Template1/octopus.css Apologies as I know I've been struggling with this for a few days now and keep returning here for help. TIA Mark __ your personal webtop. @ http://www.goowy.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Firefox problem: Forces 100% width on a floated element
I have a strange problem I have never seen before. I have two floated elements inside another floated element. The two in question are floated left and right with widths of 48% - effectively giving me two columns, one thing on the left, one thing on the right. The problem is in Firefox, the right floated element is being forced to a 100% width, even though the class specifies 48%. It works fine in IE strangely enough. The page in question can be seen at: http://www.pixelmech.com/rev/test.html The CSS is inline. The class/element in question is .float-left-half inside the #help-titlebar. Any help is appreciated. Currently I'm locally overriding the width inline to fix it, but that is highly undesireable... Thanks Tom __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE problem using graphic as underline Article updated !
francky wrote:
Article/tutorial Fun links in css (Underline with IE-proof home made
text-decoration):
http://home.tiscali.nl/developerscorner/imaging/fun-links.html
... and don't laugh! ;-)
I asked it, so I got it...
Els wrote me within an hour:
:-)I tried not to, but on a developer's IE with image caching off,
it just looks funny the way the images line up on every hover :-)
Anyway, I saw your 2 remarks at the bottom of the page, and I think
you might wanna add a third one:
It isn't a good idea accessibility wise, since for people who surf
with images off and css enabled, there's no indication at all that
that text is actually a link. I think this method should be combined
with some other form of styling on the text maybe?
Made a point! Weak defense: the same issue is in the ALA article, but it
is masked over there. [1]
I figured out that just canceling the a { text-decoration: none; } is
enough (and a third remark is not needed).
See the update:
http://home.tiscali.nl/developerscorner/imaging/fun-links.html#accessibility
Thanks go to Els,
Greetings,
francky
[1] The underline is gone with the: a { text-decoration: none; } in the
article.css, but by accident it is coming back via the general ALA
stylesheet base.css: a { border-bottom: 1px solid #555;}.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 2 columns with borders plus a footer that sticks to the bottom of the viewport
What i'am trying to achieve is: - a 2 columns layout with vertical borders where the 2 columns stretch to the bottom of the viewport (even when both columns only have one or 2 lines of text) - combined with a footer that sticks to the bottom of the viewport i started almost a half year ago and i thought this wouldn't be too difficult, but it turned out to be not that easy at all, t.i. if you want it to work accross browsers due to circumstances, i had to stop my attempts a couple of months ago this is how far i came then: http://beta.erikvisser.net/bart/old/ (css doesn't validate because of an ie hack: word-wrap) i understood that this mockup is unstable so i try to resolve this problem i found this: http://limpid.nl/lab/css/fixed/footer and combined it with this: http://www.fu2k.org/alex/css/onetruelayout/example/interactive?order=2-1width=50-49.5equal_height=1 Resulting in getting almost what i want: http://beta.erikvisser.net/bart/new/1/ The only thing it does not yet do is: both columns stretching down to the bottom of the viewport even if they each only have a few lines of text you can see this the best when you zoom-out quite a bit before fixing this short coming i like your opinions My questions are: - is new this a better approach compared with the original approach as shown on http://beta.erikvisser.net/bart/old/ - or is there a better aproach? - any remarks are welcome - and how can i let both columns stretch to the bottom of the viewport, even when both contain hardly any text? thanks, Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Text over image in IE
Erik Gyepes wrote: Look here: http://pripisa.sk/stranka/oddych-vo-vode/ ... why is the text over image in IE? In FF is everything allright. Can my anyone help? 1: you have triggered 'hasLayout'[1] on the paragraphs. Cleaning up and restyling those paragraphs, which includes getting rid of the pstrong /strong/p those paragraphs are nested in, and also the span style=font-weight: normal; /span inside those paragraphs... p style=width: auto;Areál oddychu a zábavy... p style=width: auto;V areáli nájdete 7... ...will fix that minor problem. Yes, it is an IE-bug, but it won't go away so you better learn how to lay out your pages with that bug in mind. 2: Your entire source-code is a mess of wrongly nested elements and non-strict attributes... http://validator.w3.org/check?uri=http%3A%2F%2Fpripisa.sk%2Fstranka%2Foddych-vo-vode%2F ...which make rendering in any browser *a gamble* based on the art of 'error recovery'. Your CSS can't be validated because of all the errors in the source-code. If you intend to write 'xhtml Strict', then you should take the time necessary to study what that DTD demands of you. It will pay off. 3: You use a lot of 'inline styling' which makes debugging and maintenance almost hopeless. Styles belong in external, or internal, CSS stylesheets, and such 'inline-styles' should only be used in exceptional cases - which are rarely found. regards Georg [1]http://www.satzansatz.de/cssd/onhavinglayout.html -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Text over image in IE
Hi! Thanks for your reply. I know that this code is really messy, I really not enjoy it. It is generated by WYSIWYG editor in CMS of company which this page is. I know XHTML and CSS quite good but I really dont like to work on project which was made before me by someone else, but now I must to fight with it. Thanks again, I will try it. Erik Gunlaug Sørtun wrote: Erik Gyepes wrote: Look here: http://pripisa.sk/stranka/oddych-vo-vode/ ... why is the text over image in IE? In FF is everything allright. Can my anyone help? 1: you have triggered 'hasLayout'[1] on the paragraphs. Cleaning up and restyling those paragraphs, which includes getting rid of the pstrong /strong/p those paragraphs are nested in, and also the span style=font-weight: normal; /span inside those paragraphs... p style=width: auto;Areál oddychu a zábavy... p style=width: auto;V areáli nájdete 7... ...will fix that minor problem. Yes, it is an IE-bug, but it won't go away so you better learn how to lay out your pages with that bug in mind. 2: Your entire source-code is a mess of wrongly nested elements and non-strict attributes... http://validator.w3.org/check?uri=http%3A%2F%2Fpripisa.sk%2Fstranka%2Foddych-vo-vode%2F ...which make rendering in any browser *a gamble* based on the art of 'error recovery'. Your CSS can't be validated because of all the errors in the source-code. If you intend to write 'xhtml Strict', then you should take the time necessary to study what that DTD demands of you. It will pay off. 3: You use a lot of 'inline styling' which makes debugging and maintenance almost hopeless. Styles belong in external, or internal, CSS stylesheets, and such 'inline-styles' should only be used in exceptional cases - which are rarely found. regards Georg [1]http://www.satzansatz.de/cssd/onhavinglayout.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox problem: Forces 100% width on a floated element
I have a strange problem I have never seen before. I have two floated elements inside another floated element. The two in question are floated left and right with widths of 48% - effectively giving me two columns, one thing on the left, one thing on the right. The problem is in Firefox, the right floated element is being forced to a 100% width, even though the class specifies 48%. It works fine in IE strangely enough. The page in question can be seen at: http://www.pixelmech.com/rev/test.html The CSS is inline. The class/element in question is .float-left-half inside the #help-titlebar. Any help is appreciated. Currently I'm locally overriding the width inline to fix it, but that is highly undesireable... Thanks Tom Tom, Add a width of 99% to #help-titlebar (since you have 4px padding). You'll need to adjust the way you handle padding if you want it to be 100%, but adding a width to the parent will get Firefox to toe the line for ya. Hope it helps. Bill || | Bill Brown | | Webmaster, MacNimble.com | | http://www.macnimble.com | | mailto:[EMAIL PROTECTED] | | Phone: 215-237-2037| || ___ $0 Web Hosting with up to 200MB web space, 1000 MB Transfer 10 Personalized POP and Web E-mail Accounts, and much more. Signup at www.doteasy.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox problem: Forces 100% width on a floated element
On 5/13/06, Bill Brown [EMAIL PROTECTED] wrote: http://www.pixelmech.com/rev/test.html The CSS is inline. The class/element in question is .float-left-half inside the #help-titlebar. Add a width of 99% to #help-titlebar (since you have 4px padding). You'll need to adjust the way you handle padding if you want it to be 100%, but adding a width to the parent will get Firefox to toe the line for ya. Thanks Bill, it does fix the width issue on that float, but causes two other issues. 1. A 1% space between the header and the outside border in Firefox 2. On resize smaller, pushing content down in IE This is why I had avoided a width on that container :(. Does anyone know what the cause of FF pushing that to 100%? Is there another solution perhaps? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox problem: Forces 100% width on a floated element
On 5/13/06, Bill Brown [EMAIL PROTECTED] wrote:
http://www.pixelmech.com/rev/test.html
The CSS is inline. The class/element in question is
.float-left-half inside the #help-titlebar.
Add a width of 99% to #help-titlebar (since you have
4px padding). You'll
need to adjust the way you handle padding if you want
it to be 100%, but
adding a width to the parent will get Firefox to toe
the line for ya.
Thanks Bill, it does fix the width issue on that float, but
causes two other issues.
1. A 1% space between the header and the outside border in
Firefox 2. On resize smaller, pushing content down in IE
This is why I had avoided a width on that container :(. Does
anyone know what the cause of FF pushing that to 100%? Is
there another solution perhaps?
Tom, you can fix this by doing this:
1. In your css, change/add:
#help-titlebar {
background: #b3b3b3;
padding: 0;
height: 20px;
width: 100%;
float: left;
}
.float-left-half p {
margin: 0;
padding: 0 2px;
}
.float-right-half p {
margin: 0;
padding: 0 2px;
}
2. In your html, change/add:
div id=help-titlebar
div class=float-left-half
pstrongHelp: /strongstrong id=helptitleActivity
Overview/strong/p
/div
div class=float-right-half
pPage 1 of 2 | a href=//Next gt;/a/p
/div
br class=simpleclear /
/div
That should fix it in IE and FF.
Hope it helps.
--Bill
___
$0 Web Hosting with up to 200MB web space, 1000 MB Transfer
10 Personalized POP and Web E-mail Accounts, and much more.
Signup at www.doteasy.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem rendering in firefox 1.0.4.
My question is: is this a bug in Firefox, or in my incorrect
understanding of the css positioning?
Hello Bill,
I can't really answer your question, but it seems that width: 100%;
height: 100%; within the .popup div {} declaration caused the movement.
Furthermore, I seems that the div within the td is essential because
otherwise there is no real element to which the ul can refer to as
position.
Here's my version:
HTH
Niklas
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en
head
titletest menue/title
meta http-equiv=content-Type content=text/html; charset=iso-8859-1 /
style type=text/css
body, ul, li {
list-style: none;
margin: 0;
padding: 0;
}
.bannerNav {
width: 100%;
padding: 0;
margin: 0;
}
.bannerNav td {
border: 1px solid #76777A;
}
.popup div {
position: relative;
}
.bannerNav a {
display: block;
width: 100%;
padding: .5em 0;
text-align: center;
text-decoration: none;
}
.bannerNav .popup ul {
width: 20em;
position: absolute;
margin-top: 2px;
left: -3000px; /* off screen */
border-left: 1px solid green;
border-right: 1px solid green;
border-bottom: 1px solid green;
background: #FF; /* has to be set otherwise IE 7 beta 2
closes
popup */
}
.bannerNav .popup:hover ul {
left: 1.5em; /* back on screen */
}
.bannerNav ul a {
padding: .1em 0 .1em .6em;
text-align: left;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: red;
}
/style
/head
body
!--
works on Windows with:
Firefox V1.0.6
IE 7 beta 2
Opera V8.54
Mozilla V1.7.1
Netscape V7.1
doesn't work on Windows with:
IE 6
Opera V7.23
--
table class=bannerNav
tbody
tr
td class=popup
a href=#link text/a
div
ul
lia href=#a List item 1/a/li
lia href=#a List item 2/a/li
lia href=#a List item 3/a/li
lia href=#a List item 4/a/li
lia href=#a List item 5/a/li
/ul
/div
/td
td class=popup
a href=#more link text/a
div
ul
lia href=#b List item 1/a/li
lia href=#b List item 2/a/li
lia href=#b List item 3/a/li
lia href=#b List item 4/a/li
lia href=#b List item 5/a/li
/ul
/div
/td
td class=popup
a href=#link text/a
div
ul
lia href=#c List item 1/a/li
lia href=#c List item 2/a/li
lia href=#c List item 3/a/li
lia href=#c List item 4/a/li
lia href=#c List item 5/a/li
/ul
/div
/td
td class=popup
a href=#more link text/a
div
ul
lia href=#d List item 1/a/li
lia href=#d List item 2/a/li
lia href=#d List item 3/a/li
lia href=#d List item 4/a/li
lia href=#d List item 5/a/li
/ul
/div
/td
td class=popup
a href=#link text/a
div
ul
lia href=#e List item 1/a/li
lia href=#e List item 2/a/li
lia href=#e List item 3/a/li
lia href=#e List item 4/a/li
lia href=#e List item 5/a/li
/ul
/div
/td
/tr
/tbody
/table
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Mysterious margin-top I didn't ask for (firefox only)
In firefox my centred fixed-width 2 column layout has a mysterious margin at the top of the header. When I add a border to the header the margin-top disappears and it looks the same as ie (flush with the top). But without theborder (how I want it) the margin re-appears. Can anyone help? Here's the link : http://www.freewebs.com/gaz_tester/welcome.html Thanks Send instant messages to your online friends http://uk.messenger.yahoo.com Send instant messages to your online friends http://uk.messenger.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Mysterious margin-top I didn't ask for (firefox only)
Gaz Newt wrote:
In firefox my centred fixed-width 2 column layout has a mysterious margin at
the top of the header. When I add a border to the header the margin-top
disappears and it looks the same as ie (flush with the top). But without
theborder (how I want it) the margin re-appears.
Can anyone help?
Here's the link :
http://www.freewebs.com/gaz_tester/welcome.html
Thanks
Hi Gaz Newt,
I found:
h1 {
margin:0;
padding:0;
}
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Making a mess, navigation and footer weirdness.
Mark Fellowes wrote:
Not sure what I'm doing wrong . As suggested earlier I've removed the heights
from the content1 and content2 divs but the side nav is still off (except for
IE). Also the footer doesn't seem to want to move.
Relevant page:
http://pamshop.com/Template1/exp8.html#
[...]
Hi Mark,
For the sidenav, did you try:
#wrapper #linkcontainer { /* float: left; */ }
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Making a mess, navigation and footer weirdnes s.
I didn't try it with the /**/. I will as soon as I get back to my desktop.
Does the comments mean something different then float:left ?
Mark
-Original Message-
From: [EMAIL PROTECTED]
Sent: Saturday, May 13, 2006 7:17 PM -07:00
To: Mark Fellowes [EMAIL PROTECTED]
Cc: CSS List [EMAIL PROTECTED]
Subject: [css-d] Making a mess, navigation and footer weirdness.
Mark Fellowes wrote:
Not sure what I'm doing wrong . As suggested earlier I've removed the heights
from the content1 and content2 divs but the side nav is still off (except for
IE). Also the footer doesn't seem to want to move.
Relevant page:
http://pamshop.com/Template1/exp8.html#
[...]
Hi Mark,
For the sidenav, did you try:
#wrapper #linkcontainer { /* float: left; */ }
Greetings,
francky
__
your personal webtop. @ http://www.goowy.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Making a mess, navigation and footer weirdness.
Mark Fellowes wrote:
Francky wrote:
Hi Mark,
For the sidenav, did you try:
#wrapper #linkcontainer { /* float: left; */ }
I didn't try it with the /**/. I will as soon as I get back to my
desktop. Does the comments mean something different then float:left ?
Oh, sorry. I did mean: just delete the float:left over there.
In css, the /* */ means: between this is a comment; browsers,
don't use it as css-rule.
When I'm trying things and don't want to get rid of the version before,
I place the /* and the */ before and after the part I guess I don't
need. Does omitting work (or omitting and adding something else), than I
can delete it next time. If it doesn't work, I'm quick back. - Often,
I've to go back. ;-)
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Making a mess, navigation and footer weirdnes s.
Oh, sorry. I did mean: just delete the float:left over there. In css, the /* */ means: between this is a comment; browsers, don't use it as css-rule. When I'm trying things and don't want to get rid of the version before, I place the /* and the */ before and after the part I guess I don't need. Does omitting work (or omitting and adding something else), than I can delete it next time. If it doesn't work, I'm quick back. - Often, I've to go back. ;-) Greetings, francky Well first I should say that I added , probably for no real reason the #linkcontainer because the #links started giving me problems. A few days ago you helped me correct the problem but taking heights out of content1 and content2. Anyway, those two changed a bit. Anyway, back to your question, yes I omitted the float, and still bad. Actually, IE6 is totally screwed up now. I'll probably have to get back to this in the morning. Mark __ your personal webtop. @ http://www.goowy.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Why the height of containing block is zero?
I write the following code:
xhtml:
body
div id=header
h1Welcome to site/h1
div
a href=site in English/a
hello,please a href=login/a or a href=register/a
/div
/div
/body
css:
#header {
background-color: #FFE4B5;
}
#header h1 {
float: left;
margin: 0;
}
#header div {
float: right;
}
The problem is that the header div's background color is not displayed. It
found that it's height is zero, and padding is also zero. I refer to CSS2
specification, it says that height's default value is auto. I think it means
that the height depends on its content's height, i.e. the h1 and div's
height in this case. I don't want to specify the height explictly. What's
wrong with me? How can I solve it? TIA.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why the height of containing block is zero?
On May 14, 2006, at 10:16 AM, ray wrote:
I write the following code:
xhtml:
body
div id=header
h1Welcome to site/h1
div
a href=site in English/a
hello,please a href=login/a or a
href=register/a
/div
/div
/body
css:
#header {
background-color: #FFE4B5;
}
#header h1 {
float: left;
margin: 0;
}
#header div {
float: right;
}
The problem is that the header div's background color is not
displayed. It
found that it's height is zero, and padding is also zero. I refer
to CSS2
specification, it says that height's default value is auto. I think
it means
that the height depends on its content's height, i.e. the h1 and div's
height in this case. I don't want to specify the height explictly.
What's
wrong with me? How can I solve it? TIA.
The height is 0 because the contents of your #header consists only of
floated blocks. Those are by definition removed from the flow, and
have no effect on the height of your #header div.
I guess you want that #header to show that background colour. You'll
need to clear the floats inside it, force that #header to stay 'open'.
Here is a good solution:
http://www.positioniseverything.net/easyclearing.html
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Making a mess, navigation and footer weirdness.
Mark Fellowes wrote:
Not sure what I'm doing wrong . As suggested earlier I've removed
the heights from the content1 and content2 divs but the side nav is
still off (except for IE).
Relevant page: http://pamshop.com/Template1/exp8.html#
Small changes in source-code and CSS will make all browsers more
cooperative...
1: Source-code:
Move the end-tag for div id=content1 to a position just above div
id=linkcontainer, so that div id=content1 becomes a container for
_all_ floats on the right side.
The reason for the low side nav is that a float can not / should not
end up higher than the top of the element that precedes it in the
source-code - which is content2. IE is wrongly letting the left nav
pass 3 floats and end up alongside the top one - content1.
By making the content1 container surround/include the other
right-floats, all the standard-compliant browsers only see one
right-float, content1, above the left nav, and will make the left nav
line up with the top of it - exactly where you want it, I think.
2: CSS:
#content2 {
float: right;
width: 520px;
margin-top: 2%;
clear: both /* use this value */;
}
#wrapper #linkcontainer {
width: 200px;
margin-left: 2%;
float: left;
display: inline /* add this */;
}
The 'clear: both' change on #content2 is just to make sure IE really
clears the right-floats above content2, as IE otherwise may create some
ugly overlapping.
The 'display: inline' on #linkcontainer will kill the 'margin-doubling
bug' in IE, which otherwise will make the 2% left margin render as 4%.
Also the footer doesn't seem to want to move.
I'm not sure what you mean by that, so I can't advise a fix.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why the height of containing block is zero?
Thank your advice. I modified my code to:
div id=header
...
div style=clear:both;/div
/div
but it has no effect. Is it because the header div consists only of
floated blocks? I uses Firefox 1.5.
On 5/14/06, Philippe Wittenbergh [EMAIL PROTECTED] wrote:
On May 14, 2006, at 10:16 AM, ray wrote:
I write the following code:
xhtml:
body
div id=header
h1Welcome to site/h1
div
a href=site in English/a
hello,please a href=login/a or a
href=register/a
/div
/div
/body
css:
#header {
background-color: #FFE4B5;
}
#header h1 {
float: left;
margin: 0;
}
#header div {
float: right;
}
The problem is that the header div's background color is not
displayed. It
found that it's height is zero, and padding is also zero. I refer
to CSS2
specification, it says that height's default value is auto. I think
it means
that the height depends on its content's height, i.e. the h1 and div's
height in this case. I don't want to specify the height explictly.
What's
wrong with me? How can I solve it? TIA.
The height is 0 because the contents of your #header consists only of
floated blocks. Those are by definition removed from the flow, and
have no effect on the height of your #header div.
I guess you want that #header to show that background colour. You'll
need to clear the floats inside it, force that #header to stay 'open'.
Here is a good solution:
http://www.positioniseverything.net/easyclearing.html
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why the height of containing block is zero?
Thank your advice. I modified my code to:
div id=header
...
div style=clear:both;/div
/div
Hello ray,
that's because you've inserted a new div which clears the flow but still
has float: right; due to the definition: #header div {float: right;}. So
extending the div style=float: none; clear: both;/div will help,
which is not very elegant, better would be creating a class for the div
containing the login/language.
works on Windows with:
IE 7 beta 2
Firefox 1.5.0.3
Opera 7.23
Opera 8.54
doesn't work on Windows with:
Firefox 1.0.6 - background complete white
IE 6 - background of h1 is white
Netscape 7.1 - background complete white
Mozilla 1.7.1 - background complete white
HTH
Niklas
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html
head
titleUntitled/title
style type=text/css media=screen,projection
#header {
background-color: #FFE4B5;
}
#header h1 {
float: left;
margin: 0;
}
#header div {
float: right;
}
/style
/head
body
div id=header
h1Welcome to site/h1
div
a href=site in English/a
hello, please a href=login/a or a
href=register/a
/div
div style=float: none; clear: both;/div
/div
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
