[css-d] USING RELATIVE AND ABSOLUTE POSITIONING
When do you use relative, absolute, and/or fix positioning ? I mean I
understand the concepts but I am mainly floating div containers to construct
a layout for a site. The only time that I see myself using relative or
absolute is in this case:
HTML:
div id=header
div id=logo
/div !-- end of logo --
/div !-- end of header --
CSS:
#header { position: relative; }
#logo { position: absolute;
top: 10px;
left: 10px; }
where the positioning of the logo is absolutely positioned inside the header
bc the position is labeled as relative.
This is the one and only thing i learned about these two properties,
relative and positioning. are there any other things that you can do with
them?
_
Like the way Microsoft Office Outlook works? Youll love Windows Live
Hotmail.
http://imagine-windowslive.com/hotmail/?locale=en-usocid=TXT_TAGHM_migration_HM_mini_outlook_0507
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] AlphaImageLoader
Hi Kirsten, You are missing some important attributes in AlphaImageLoader.Basically you need to add the enabled attribute and the sizingMethod. Here is a working exampl: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src='/images/frontend/dropmenu/servicesBg.png'); Here is the link to the Microsoft definition for the AlphaImageLoader: http://msdn2.microsoft.com/en-us/library/ms532969.aspx regards, Jens -- So long, and thanks for all the fish! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Safari overflow:auto problem
I'm new to this list and have searched for posts related to this
problem but haven't found any, so I'm going to ask... I've made a div
that contains a long, horizontal swf that I want to scroll side to
side by means of overflow: auto. This works fine everywhere I care
about, except Safari/Mac. You can see my problem (only on Mac/
Safari) at:
http://stories.mnhs.org/stories/mgg/timeline.do?eraID=2;mode=flash
here's the relevant css:
#scroll_time {
height: 405px;
width: 750px;
overflow: auto;
border: thin solid #E1E1E1;
padding: 0;
margin-top: 0px;
}
Any clues or info will be most appreciated! thanks.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] two variable width divs side by side
Hi, I have a simple problem that I try to solve now for almost 3 weeks (not 8 hours a day but long enough) Simple, because it is solves within 5 minutes when using tables, but it seems to be impossible to do it table free. Please proof me wrong. :-) The page consists of two columns. The left column should contain a menu and has a fixed width. the right column contains a table with data from a database. The user can choose, which information of the database he wants to see. So it is obvious that the table (ans thus the right column) has a variable width. Everything works fine until the outer div reaches the right edge of the browser window. Then the right column will be placed beneath the menu instead of right from it. This is my code so far (stripped to a minimum): div style=width:auto; white-space:nowrap; border:1px solid black; div style=white-space:nowrap; border:1px solid fuchsia; margin:2px; float:left; That's the way it looksbr impossible without tables? /div div style=width:auto; white-space:nowrap; border:1px solid lime; margin:2px; float:left; table border=1 tr td11/td td22/td /tr /table /div div style=clear: bothnbsp;/div /div You can see the test page here (shrink your browser windows to see the effect) http://paul-sommer.de/test/tablefree.html This example also contains a tabled layout to show the intended behaviour. The table also shows the wanted colouring which also seems impossible with DIVs. I wonder why people are encouraged not to use tables when the alternative solution is that painful and time consuming (not to speak at all about the browser incompatibilities) Please help me, as I'm totally frustrated and considering giving up table free layout. Thanks in advance Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] hover technique
At 5/22/2007 10:15 AM, Mauricio Samy Silva wrote: I hosted a test case showing a possible solution: Please, look at: http://www.maujor.com/temp/css-d/hover-effect.html __ Mauricio, this technique as you've used it here doesn't survive text-resizing, but it looks like that can probably be corrected by setting block heights in ems to prevent them from colliding. Paul __ Hi Paul, Thank you for feedback. Setting block heights in ems didn't works, but setting in ems the top property for absolutely positioned blocks do. I've fixed it. Maurício Samy Silva http://www.maujor.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] two variable width divs side by side
On 23/05/07, Paul Sommer [EMAIL PROTECTED] wrote: div style=width:auto; white-space:nowrap; border:1px solid black; div style=white-space:nowrap; border:1px solid fuchsia; margin:2px; float:left; That's the way it looksbr impossible without tables? /div div style=width:auto; white-space:nowrap; border:1px solid lime; margin:2px; float:left; table border=1 tr td11/td td22/td /tr /table /div div style=clear: bothnbsp;/div /div Please help me, as I'm totally frustrated and considering giving up table free layout. Try this out for size: div style=border: 1px solid black; width: auto; float: left; div style=border: 1px solid fuchsia; margin: 2px; float: left; width: 100px; That's the way it looks without tables /div div style=border: 1px solid lime; margin: 2px 2px 2px 108px; width: auto; table border=1 tbodytr td11/td td22/td /tr /tbody/table /div div style=clear: both;nbsp;/div /div If you want to increase the space between the divs simple increase the margin-left value (108px - this allows for the 100px width + total 6px margin + 2px of border). Hope this helps Rory __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] USING RELATIVE AND ABSOLUTE POSITIONING
On 5/23/07, Jason Chan [EMAIL PROTECTED] wrote: This is the one and only thing i learned about these two properties, relative and positioning. are there any other things that you can do with them? Hi Jason, Perhaps the most commonly used feature available when relative or absolute positioning is used is the z-index. I use it most often when I have a transparent gif or png image that I want to overlap certain sections of the page; relative positioning allows me to move the element outside of the document's normal flow and z-index ensures that its always above the other elements. Here are a couple of URL's with some helpful information as to how each position type works; they should help get you started: Learn CSS Positioning in 10 Steps http://www.barelyfitz.com/screencast/html-training/css/positioning/ BrainJar.com: CSS Positioning http://www.brainjar.com/css/positioning/ Brian __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Vertical Space Grudge Match: br vs css
Jukka K. Korpela wrote: On Mon, 21 May 2007, david wrote: that each line is easily handled as a separate paragraph, with CSS controlling line spacing and left/right margins. Just to add my two cents worth. When writing mathematics one frequently must display a formula which in fact is in the middle of a sentence. It certainly would not be appropriate to think of that displayed formula as a separate paragraph. Del __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] USING RELATIVE AND ABSOLUTE POSITIONING
Jason Chan wrote:
When do you use relative, absolute, and/or fix positioning ? I mean I
understand the concepts but I am mainly floating div containers to
construct a layout for a site. The only time that I see myself using
relative or absolute is in this case:
HTML:
div id=header
div id=logo
/div !-- end of logo --
/div !-- end of header --
CSS:
#header { position: relative; }
#logo { position: absolute;
top: 10px;
left: 10px; }
where the positioning of the logo is absolutely positioned inside the
header bc the position is labeled as relative.
This is the one and only thing i learned about these two properties,
relative and positioning. are there any other things that you can do
with them?
I find absolute positioning to be a great way to sub-divide a column in
a 3 column layout where the sub divided section as using clear to
establish a further columned section would place it below the 3 main
columns.
Also, absolute positioning is cool for total separation layouts. Say you
have three divs each children of the body element but div2 is a
navigational element that you want placed inside div1 you can position
it absolutely and have it fit together perfectly. Having each of your
page element completely separate from one another allows you to use
multiple stylesheets to create entirely different layouts without having
to worry about what is nested where. This could be a great boon if
you're designing to meet accessibility guidelines.
--
Thanks,
Jim
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Empty Inline elements and backgrounds
hmm. I can't wrap the following text in the span,
because that is static content, whereas the spans I am
creating are dynamic and must be inserted directly
after each link.
I kind of got it working at:
http://cohencentral.com/appendFileName/
However, because the outside span is positioned
absolute, it's taken out of the flow and overwrites
the following text. Is there a way to position it
absolutely and also make it take up its own space so
that the following text makes room for the icon and/or
the generated text?
Well, if there's content in the span it should
display correctly (thus,
you're only add the nbsp where you don't add content
and this is usually
as easy as adding an 'else' condition if scripting).
However, in the interest of staying on topic. Try
wrapping the
bothersome span as well as any following text inside
another span and
then wrap just the following text in another span
that's on the same
document level as the empty span. Then set each 2nd
span to display:
block; float: left; and then use absolute
positioning on their parent
span to place it back where it belongs. This
distance could be more
easily calculated if you set the line-height of the
li element. So it
would look like:
span span {display: block; float: left;}
ul li {line-height: 1em; position: relative;}
.textWrap {position: absolute; left: 100%;}
ulliText Here span
class=textWrapspan/spanspan Some More
Text./span/span/li/ul
That's pretty ugly but it sounds like your script is
preventing a lot of
easier solutions. Now, you'd want to test that
cross-browser because
something is tickling my brain about using position:
absolute inside
position: relative but I don't remember off hand
what it could be...
--
Thanks,
Jim
Thanks,
-Aaron
Ready
for the edge of your seat?
Check out tonight's top picks on Yahoo! TV.
http://tv.yahoo.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Help needed with couple of problems
Holly Bergevin wrote: From: Tango [EMAIL PROTECTED] I really need to contain the content inside the #map div . http://thetangos.com/tango/map_listing.html page moved to here http://www.oldclan.net/test_area/map.html Then you really need a clearing element to be inserted right before the close of that div. With your current markup, that would be the next to last thing before the closing body tag. ~holly Thanks Holly That fixed my problem. I still some have troubles with floats in general, but with this added info and this article http://www.complexspiral.com/publications/containing-floats/ I now have a much better understanding of floats. Tango http://www.thetangos.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Float within a Float
Hi, Know it's difficult, but this is not on the web, and even though only very small not fair to ask others to load it in to their browser. I have a content div floated left, which contains another div floated right. The inner div will not move of the bottom of the containing div. I've added a clearing div and it just sits on top of that. All height and width declarations are in % , everything else works just fine. Any help would be gratefully appreciated... TIA David G) - __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Float within a Float
Hi,
Know it's difficult, but this is not on the web, and even though
only very
small not fair to ask others to load it in to their browser.
I have a content div floated left, which contains another div
floated right.
The inner div will not move of the bottom of the containing div.
I've added a clearing div and it just sits on top of that. All height and
width declarations are in % , everything else works just fine.
Any help would be gratefully appreciated...
TIA
David G)
Hi David
I suspect that it may have something to do with your heights. Following
works fine for me:
html
head
titleUntitled/title
style = text/css
#container
{background:yellow;width:100%;overflow:hidden;text-align:center;height:500px
}
#content {float:left;width:90%;margin:0
auto;height:50%;background:blue;}
#right {float:right;width:25%;background:red;height:20%}
/style
/head
body
div id=container
div id=content
div id=right
/div
/div
/div
/body
/html
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.467 / Virus Database: 269.7.6/815 - Release Date: 22/05/2007
15:49
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Float within a Float
Shelly wrote: The one that's floated right should come first in the source code, I Hi Shelly, That fixed it, I've left the clearing div in place in the hope it will assist in alignment later on.. BTW, I've noticed that when I reply it goes back to the individual. So I hope you don't mind, as I've put this back on the list for all to see. Thanks David G) - __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] IE6 creating big gap
From: Tim Offenstein [EMAIL PROTECTED] Subject: [css-d] IE6 creating big gap The page is http://www.ahs.uiuc.edu/research/center/default.htm, the Staff IE6 is creating a huge gap between the director's information and the section title Theme Leaders. -Tim Hi Tim The heading Theme Leaders and Health must be enclosed within the same DIV floated to the left. As you coded one DIV for Theme Leaders and another for Health you broken the basic tamplate = DIV to the left folowed by DIV to the right. and this crashes the layout. One possible solution is to change the following code fragment: div class=list-left h3Theme Leaders:/h3 /div div class=clear!-- empty comment --/div div class=list-left h4Health/h4 /div div class=list-right ul liKenneth L. Watkin, PhD/li li... by this one: div class=list-left h3Theme Leaders:/h3 !-- adjust margins properly via CSS -- h4Health/h4 /div div class=list-right ul liKenneth L. Watkin, PhD/li li... And let's see if the rezising bug dissapear with this fix. Regards, Maurício Samy Silva http://www.maujor.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] IE6 creating big gap
At 3:47 PM + 5/23/07, Mauricio Samy Silva wrote: Hi Tim The heading Theme Leaders and Health must be enclosed within the same DIV floated to the left. As you coded one DIV for Theme Leaders and another for Health you broken the basic template = DIV to the left folowed by DIV to the right. and this crashes the layout. Thanks Mauricio for your response however I tried your suggestion and am still getting the big gap. I also tried adding in an empty list-right class to keep the template consistent (although I'm aware empty divs are not best practice) and still got the gap. Still scratching my head. -Tim -- Tim Offenstein *** College of Applied Health Sciences *** (217) 244-2700 CITES Departmental Services Web Specialist *** www.uiuc.edu/goto/offenstein __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Site check
Hi, Would it be possible to check this site on any major css flaws in different browsers ? I have tested Safari, IE 6/7 firefox Thanks in advance Silvester URL: http://home.rosedev.nl/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Site check
The navigation looks nice, like the image sprites. But when the text is resized with the browser (in firefox), the #infobar div gets pushed down, and the #menu sprite images are exposed. Could you adjust the positioning of #infobar to fix this? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] two variable width divs side by side
Rory Fitzpatrick wrote: Try this out for size: div style=border: 1px solid black; width: auto; float: left; div style=border: 1px solid fuchsia; margin: 2px; float: left; width: 100px; That's the way it looks without tables /div div style=border: 1px solid lime; margin: 2px 2px 2px 108px; width: auto; table border=1 tbodytr td11/td td22/td /tr /tbody/table /div div style=clear: both;nbsp;/div /div Maybe I have stripped my example a bit too much :-) Your solution works only with that simple example. The real thing has a background image attached to the right column. (please look at the extended sample here http://paul-sommer.de/test/tablefree.html ) Expanding that image to the left side is not a solution as the menu column grows if the user enlarges the font size (Ctrl + in firefox). The menu column must be sized with em (I think). Otherwise the text runs out of the box if the user enlarges the text. If you want to increase the space between the divs simple increase the margin-left value (108px - this allows for the 100px width + total 6px margin + 2px of border). Hope this helps Rory __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/ -- Sei nicht verzweifelt, wenn es ums Abschiedsnehmen geht. Ein Lebewohl ist notwendig, ehe man sich wiedersehen kann. Und ein Wiedersehen, sei es nach Augenblicken, sei es nach Lebenszeiten, ist denen gewiß, die Freunde sind. -- Richard Bach __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Centering a floating list.
First, let me apologize for not having a test page. I'm at work and am
unable to access FTP.
I have a list I am trying to center, here is the code to create a test
page:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
titleUntitled Document/title
style type=text/css
.mpl {
float:left;
display: block;
text-align:center;
font-size:0.9em;
padding-right:1em;
}
.mpl strong {
font-size:1.3em;
display:block;
}
.last {
padding:0;
}
/style
/head
body
div style=margin:0 auto; text-align:center; class=list
div style=display:block; text-align:center;strongCenter |
Center/strong/div
ul style=width:350px;
li class=mpl1 - 14br /strong$6.62/strong/li
li class=mpl15 - 49br /strong$5.00/strong/li
li class=mpl50 - 199br /strong$3.76/strong/li
li class=mpl last200+br /strong$3.38/strong/li
/ul
/div
/body
/html
Obviously, the code is messy. That's not how it will look when I push
it live, I promise :)
Basically, in IE7, it will at least try to center it, but it doesn't
actually (it's shifted to the side a bit) and in FF, it doesn't move at
all.
I'm sure I am just overlooking something silly, but I've been hacking at
this code for 6 hours now and it's time to ask for help!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Site check
Silvester Kok wrote: Hi, Would it be possible to check this site on any major css flaws in different browsers ? I have tested Safari, IE 6/7 firefox Thanks in advance Silvester URL: http://home.rosedev.nl/ Opera/9.20 Camino/1.0.4 IE/6 and 7 The horizontal nav is breaking a little early (+1). I am not sure why: the header images did not load on my end in IE. Best, ~dL __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Site check
Matt, I have tried this, but because the navigation is based on a list it sizes with the text. overflow: hidden does not do the trick. Silvester On May 23, 2007, at 7:30 PM, Matt McCool wrote: The navigation looks nice, like the image sprites. But when the text is resized with the browser (in firefox), the #infobar div gets pushed down, and the #menu sprite images are exposed. Could you adjust the positioning of #infobar to fix this? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Site check
David Thanks, header images are in Flash player 8 and 9 so that might be the problem. Need a fix for this too. Again thanks. Regards, ROSE Development Silvester Kok On May 23, 2007, at 7:54 PM, David Laakso wrote: Silvester Kok wrote: Hi, Would it be possible to check this site on any major css flaws in different browsers ? I have tested Safari, IE 6/7 firefox Thanks in advance Silvester URL: http://home.rosedev.nl/ Opera/9.20 Camino/1.0.4 IE/6 and 7 The horizontal nav is breaking a little early (+1). I am not sure why: the header images did not load on my end in IE. Best, ~dL __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] IE 6 not displaying image
Hey all, Any idea of what may be going on here? IE6 does not display the image in the top left side of the banner. http://www.uoguelph.ca/~dmangroo/index.html thanks! Sandy __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] IE 6 not displaying image
Hey all, Any idea of what may be going on here? IE6 does not display the image in the top left side of the banner. http://www.uoguelph.ca/~dmangroo/index.html styles are here: http://www.uoguelph.ca/~dmangroo/mangroo.css thanks! Sandy __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Faux column working in IE6, but not Firefox or Netscape
http://www.gwvirginia.gwu.edu/newsite/pg2.4.html My faux columns are working in IE6, but not in Firefox 2.0.0.3. I haven't tested extensively in other browsers, but Netscape 7.0 and 7.2 don't seem to be working either. The page and css have passed W3C validation. I have a background image set on #wrapcolumns with a width of 738px. background: url (../images/bg2.gif) repeat-y; The left hand subnavigation column (#navbarside, float: left) should be dark blue and the #wrapper (float: right with other divs inside of it) should have a white background. My style sheet is at /styles/pg.2.3.css. Note that I'm still tweaking a number of other things on the page. Thanks in advance for help with this. Dova H. Wilson Marketing Communications Specialist George Washington University Virginia Campus 20101 Academic Way, Suite 134 Ashburn, Virginia 20147 Phone: 703-726-3652 Fax: 703-726-3655 www.gwvirginia.gwu.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] two variable width divs side by side
Rory Fitzpatrick wrote: Try this out for size: div style=border: 1px solid black; width: auto; float: left; div style=border: 1px solid fuchsia; margin: 2px; float: left; width: 100px; That's the way it looks without tables /div div style=border: 1px solid lime; margin: 2px 2px 2px 108px; width: auto; table border=1 tbodytr td11/td td22/td /tr /tbody/table /div div style=clear: both;nbsp;/div /div Maybe I have stripped my example a bit too much :-) Your solution works only with that simple example. The real thing has a background image attached to the right column. (please look at the extended sample here http://paul-sommer.de/test/tablefree.html ) Expanding that image to the left side is not a solution as the menu column grows if the user enlarges the font size (Ctrl + in firefox). The menu column must be sized with em (I think). Otherwise the text runs out of the box if the user enlarges the text. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] clear property clears all floats?
Could someone tell me what I'm doing wrong with this page? http://www.hotfrenchbulldogs.com/angus2.html My goal is to float the first image (angus-02) to the left with the text along side. Then I'd like the next image (angus-03) to clear the float from the first image and be centered below the image and text above it. But, adding my float class to that second image floats it down below my (floated) left navigation. Why? Thanks! -- Erin Spangler www.thedogsonline.com Web Design and Hosting for the Dog Enthusiast __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] clear property clears all floats?
At 3:11 PM -0400 5/23/07, Erin Spangler wrote: Could someone tell me what I'm doing wrong with this page? http://www.hotfrenchbulldogs.com/angus2.html My goal is to float the first image (angus-02) to the left with the text along side. Then I'd like the next image (angus-03) to clear the float from the first image and be centered below the image and text above it. But, adding my float class to that second image floats it down below my (floated) left navigation. Why? Hi Erin, I'm having similar problems with floats but in looking over your code, why not remove the clearcenter class on the second image and instead use class=center on the p element as you've done with glory.html? This will bring Angus' second image up like you're describing. Cute dogs BTW. My miniature dachshund, Oscar, would love a buddy! -Tim -- Tim Offenstein *** College of Applied Health Sciences *** (217) 244-2700 CITES Departmental Services Web Specialist *** www.uiuc.edu/goto/offenstein __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] changing font sizes - pt px doesn't work in CSS
Here's the site in question: www.bctarizona.com
It's a nightmare and I'm slowly trying convert it to good XHTML/CSS. Today I
was attempting to change all the type from points to pixels via the
stylesheet. I put font-size: 13px in the body and then changed all the other
specs as %s to reference it. There's a normal class which was set to 10pt so
I changed it to 100% which should make it equal what's in the body tag. But,
ALL the text with a class of normal is MUCH larger and DOES NOT change
regardless of what I put in the stylesheet. No matter what I changed the
body tag or normal class it all stayed the same. And, since I made all the
other tags % they should reference the body which means that
increasing/decreasing the body {font-size...} should increase everything,
including the top side menus. Not so...
So, there are a lot of problems including but not limited to: it's all
tables, no DOCTYPE, most of the styles are inline... Don't bother validating
it and telling me it doesn't validate. I know. I'm trying to convert it to
good code but it's slow in progress. And, other than no DOCTYPE I don't see
how any of the errors make the pages ignore px.
I have worked around it by defining everything as px which isn't making
anything easier. Why doesn't this site like to use px in the manner you
should? If it's just an issue of no DOCTYPE that should be an easy fix. I
tried adding it to the header.php page but it errored out on me. I'll have
to figure out why PHP doesn't like the DOCTYPE in front of html.
Thanks for any insight...
Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] IE6 and IE7 having trouble with images HEEEEELLLLLLLPPPPPPP!!!!!!!!! Please please please
Please please help! This page http://www.uoguelph.ca/~dmangroo/research/research.html is displaying in all kinds of versions of FF and Opera just fine. In IE6, the top left logo doesn't show up. The big image in the content is fine. In IE7, the top left logo is there looking just as it should, and the big image in the content is not displaying the bottom 3rd. I just don't see what the trouble is, and any help would be much appreciated. thanks in advance, Sandy __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] two variable width divs side by side
Paul Sommer wrote, On 23.05.2007 20:58:
Your solution works only with that simple example. The real thing has a
background image attached
to the right column.
(please look at the extended sample here
http://paul-sommer.de/test/tablefree.html )
Expanding that image to the left side is not a solution as the menu column
grows if the user
enlarges the font size (Ctrl + in firefox).
The menu column must be sized with em (I think). Otherwise the text runs out
of the box
if the user enlarges the text.
Not sure if I got the problem, but perhaps something like that - uses
position instead of float to avoid problems with too wide table
(untested just to give you an idea) assuming a solid background-color
for the menu column.
div id=container
div id=menu/div
table/table
/div
/div
#container {position: relative; border-left: yellow solid 20em;
background-image: ...}
#menu {width: 18em; position: absolute; left: 1em; top: 0;}
anything else you didn't mention? ;-)
Gruß
Susanne
--
http://sujag.de - Webentwicklung und -beratung
10119 Berlin, Tel: 030 - 440 483 47
* CSS-Referenz für den Schreibtisch * CSS GE-PACKT - mitp
http://mitp.de/vmi/mitp/detail/pWert/1620/titel/CSS%20GE-PACKT
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] changing font sizes - pt px doesn't work in CSS
Michael Stevens wrote:
Here's the site in question: www.bctarizona.com
It's a nightmare and I'm slowly trying convert it to good XHTML/CSS. Today I
was attempting to change all the type from points to pixels via the
stylesheet. I put font-size: 13px in the body and then changed all the other
specs as %s to reference it...trimmed]
Mike
It is a lot easier if you set default (100%) on the body. And use
percent throughout for font-sizes and a raw number (no unit of measure)
for line-height.
This is a 5 minute fast dirty pass at what you've got:
body {
font: 100% Verdana, Arial, sans-serif;
}
.veryverysmall{font-size: 70%;}
.verysmall{font-size: 76%;}
.small{font-size: 80%;}
.normal{font-size: 85%;}
.large{font-size: 95%;}
.verylarge{font-size: 120%;}
.huge{font-size: 150%;}
.bold{font-weight: bold;}
.caption { font-size: 70%; }
.sectionhead { font-size: 110%; }
.pagetitle {
font-size: 95% ; }
.leftmenuheader {
font-size: 90%;
line-height: 1.3;
}
a.leftmenutext, a.leftmenutext:link, a.leftmenutext:visited {
font-size: 85%;
line-height: 1;
}
.leftmenulogin {
font-size: 80%;
}
.leftmenuloginheader {
font-size: 80%;
}
a.leftmenulogintext, a.leftmenulogintext:link, a.leftmenulogintext:visited {
font-size: 80%;
}
a.topmenu, a.topmenu:link, a.topmenu:visited {
font-size: 80 %;
}
td.updatesheader {
font-size: 120%;
}
.footertext { font-size: 80%; }
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] changing font sizes - pt px doesn't work in CSS
-Original Message-
From: David Laakso
It is a lot easier if you set default (100%) on the body. And use percent
throughout for font-sizes and a raw number (no unit of measure) for
line-height.
This is a 5 minute fast dirty pass at what you've got:
body {...]
--
By setting body to 100% you still haven't define it, have you? That's why I
was trying to set body to 13px and % for everything else.
Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] changing font sizes - pt px doesn't work in CSS
On 5/23/07, Michael Stevens [EMAIL PROTECTED] wrote:
-Original Message-
From: David Laakso
It is a lot easier if you set default (100%) on the body. And use percent
throughout for font-sizes and a raw number (no unit of measure) for
line-height.
This is a 5 minute fast dirty pass at what you've got:
body {...]
--
By setting body to 100% you still haven't define it, have you? That's why
I
was trying to set body to 13px and % for everything else.
Mike
While this last is true, I think we have to realize that the web is not a
fixed medium, it is a flexible one. The vast majority of folks have either
set their default font sizes according to their preferences, or have
accepted the browser default because it doesn't bother them enough to find
out how to change it.
If this is so, then if you set your body font to 100% as David suggests, you
will be least likely to offend the largest part of your audience. On the
other hand if you use 13px for a default font size I will not be able to
read your page without resizing it, a nuisance to me. That alone, depending
on my mood, may well be (often is) enough to send me away without reading
further.
--
Ed Seedhouse
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Repost: Text covered on IE7, images covered on IE6
Tom McNeer wrote: ... http://www.identitysciences.com/layouts/test.html In Firefox and Safari, all seems well. In IE7, the lower part of the footer text is cut off. The text gets clipped by its line-height, I'd say. What is the reason to insert 2 breaks and having a line-height of 0.4em? Vertical centering? see http://css-discuss.incutio.com/?page=CenteringTextVertically In IE6, the images on the left of the main content area are being covered or truncated on the left edge. The hand and the clock should both extend to the left edge of the content area. Again a clipping effect. See http://www.satzansatz.de/cssd/onhavinglayout.html#clip to prevent an element from being clipped, in IE7, it needs haslayout in IE6, it needs haslayout and position:relative An image always has layout in IE. All you need is to add position:relative. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] clear property clears all floats?
On 5/24/07, Erin Spangler [EMAIL PROTECTED] wrote: Could someone tell me what I'm doing wrong with this page? http://www.hotfrenchbulldogs.com/angus2.html My goal is to float the first image (angus-02) to the left with the text along side. Then I'd like the next image (angus-03) to clear the float from the first image and be centered below the image and text above it. But, adding my float class to that second image floats it down below my (floated) left navigation. Why? If you wrap both images in a floated container, the clear will restrict itself to that container. the container will have to have some dimension specified to avoid haslayout issues. -- Richard Grevers, New Plymouth, New Zealand Hat 1: Development Engineer, Webfarm Ltd. Hat 2: Dramatic Design www.dramatic.co.nz Lost yet? http://www.lost.eu/3d33f __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Faux column working in IE6, but not Firefox or Netscape
On May 24, 2007, at 3:46 AM, Dova Wilson wrote: http://www.gwvirginia.gwu.edu/newsite/pg2.4.html My faux columns are working in IE6, but not in Firefox 2.0.0.3. I haven't tested extensively in other browsers, but Netscape 7.0 and 7.2 don't seem to be working either. The page and css have passed W3C validation. I have a background image set on #wrapcolumns with a width of 738px. background: url (../images/bg2.gif) repeat-y; The left hand subnavigation column (#navbarside, float: left) should be dark blue and the #wrapper (float: right with other divs inside of it) should have a white background. IE is saved by its own stupidity: your #wrapcolumns 'haslayout' [1]: it has a width declared. In other browsers, the #wrapcolumns collapses in height, because it only contains floated blocks, which are removed out of the flow. One solution is insert a clearing div at the end of #wrapcolumns to force it to stay open. Or take one of the 'easy clearing' solutions: http://www.positioniseverything.net/easyclearing.html more options listed on the wiki http://css-discuss.incutio.com/?page=ClearingSpace [1] http://www.satzansatz.de/cssd/onhavinglayout.html Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] changing font sizes - pt px doesn't work in CSS
On May 24, 2007, at 6:22 AM, David Laakso wrote:
Michael Stevens wrote:
Here's the site in question: www.bctarizona.com
It's a nightmare and I'm slowly trying convert it to good XHTML/
CSS. Today I
was attempting to change all the type from points to pixels via the
stylesheet. I put font-size: 13px in the body and then changed all
the other
specs as %s to reference it...trimmed]
Mike
It is a lot easier if you set default (100%) on the body. And use
percent throughout for font-sizes and a raw number (no unit of
measure)
for line-height.
This is a 5 minute fast dirty pass at what you've got:
[...]
Also bear in mind that in quirksmode, font-size inheritance on tables
doesn't work.
You have to add a rule: table {font-size:100%} for %font-sizing to
work (even if one specifies a font-size in px on body)
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] AlphaImageLoader
Jens, Thank you very much for the help. It's clear to me that I'm not getting the way this should be written. I added in the parts you mentioned but I am obviously missing something else because FF now won't work and IE6 is still broken. Do you happen to know if there is any reason why this would crash N4? I'm trying to not crash anything and BrowserCam looks like N4 crashed. Thanks again, Kirsten __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] AlphaImageLoader
It will certainly crash in N4, since CSS is used, that was not supported back then. When you do not use conditional comments, like in your example and resort to css hacks to solve such quirks, you would use @import for the css, so that it will not be regarded by N4. I wonder though, why N4 does not seem to disregard the conditional comments. Maybe some others have more insight here. N4 has never been a requirement yet. Besides using BrowserCam, you can still install N4 seperatly on your machine if you are using a Microsoft OS based development machine for your site. Downloads are still available for that version. regards, Jens __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Centering a floating list.
Hi John,
This will not work that way. Your approach is correct in some ways,
but no in others.
This should be working code, working on IE 7 downwards, Opera, FF, Safari,
html
style type=text/css
!--
#ie-center-hack {
text-align: center;
}
#container {
border: 1px solid black;
margin: 0 auto;
width: 80%;
text-align: left;
}
#container .list {
width: 350px;
}
--
/style
body
div id=ie-center-hack
div id=container
ul class=list
li1 - 14br /strong$6.62/strong/li
li15 - 49br /strong$5.00/strong/li
li50 - 199br /strong$3.76/strong/li
li200+br /strong$3.38/strong/li
/ul
/div
/div
/body
/html
The list might look shifted a bit, since the default margins and
paddings of lists look a bit different in FF, IE and such. I just
added the border, so that you can see that the content container is
actually centered ;)
regards, Jens
--
So long, and thanks for all the fish!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/
