Re: [css-d] clear:float is causing layout problem
Matt Tibbits wrote:
This problem only happens in Firefox. It seems to work fine in Explorer.
Basically, I have a 2 column layout with the left column being a float.
In the right column, I am using floats on various elements, such as images.
If I don't do a clear:both after my images, everything gets messy in
explorer.
When I do the clear:both everything after the clearing element gets dropped
down below the bottom of the left menu.
You can see this in action here:
http://www.nbeastersealmarchofdimes.ca/esmod.new/forms.php
Give this a try:
ul.formpage li {
float: left;
width: 51%;
_width: 100%;
}
#content ul.formpage br {}
cheers,
gary
--
Anyone can build a usable web site. It takes a graphics designer to
make it slow, confusing, and painful to use.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] column wont move to left
I want the first column - the one at left with the navigation buttons - to start at det very beginning of the left side of the browser. Cant manage that to happen. The CSS is from one of Douglas Livingstones fine ones. I dont understand this column model very well but still I use them and try to learn some. I hav a feeling that this is good model :) thanks for any help. and I forgot URL. I am sorry and thanks to Dwan Alford who mailed me about that. http://www.kariutgaard.no/ and the stylesheet http://www.kariutgaard.no/3sp_likhoyde.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE white-space: normal
Rob Agar schrieb: Sorry I forgot to mention an important detail - this problem only appears in IE6 quirks mode. ... here's a copy of Ingo's test case but without the doctype, so it falls back to quirks mode http://www.wildlime.com/rob/test2.html . (works as expected in IE6) here's a test case showing the problem with nested lists: http://www.wildlime.com/rob/list_css_line_wrapping.html Looks like as if quirkyIE6 tries to emulate the white space bug in IE5.5, and fails on the link I posted. Thanks for your minimal testcase. I did not found a workaround yet, maybe it's just hardwired. Ingo __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Another try: Tables and 100% height
Hi there, Last week I posted a question, but nobody gave an answer. I don't know why (I surtenly do not have a bad breath), maybe not, but 140 errors generated in validating your html has the same effect. Even the css validator wouldn't come near it. grin I would first rule out bad code as a problem through different browser interpretations of what you want. Added value to this is that it almost always gets rid of the stupid errors and more people are willing to look. valid css and strict the Listerine for web pages Don't make a stupid first impression. Well, aren't You the one and only God of CSS, if You even bothered to look at the 140 errors reported by the validator You would have noticed that the URL's containing index.php?b=3d=8p=0 aren't correct. I know that: I'm not stupid (as you mentioned), Dreamweaver replaces amp; with the and I didn't bother to change that because it was just an example. I changed the links in http://www.sebastian.nl/vivium/empty.htm: not one error! So it is valid XHTML 1.0 transitional, the way I learned it by reading books from Zeldman and Meyer. So, before calling people stupid: isn't this a place where we discuss CSS (not html, xhtml or xml) and help people with less knowledge about this issue? Niek Emmen __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RES: [css-d] Floating IE problem
Can anyone please help me in that one? I can't figure out how to put it working in IE. Gustavo Caetano -- Pensamentos bonitos e mulheres bonitas jamais perduram - Charles Bukowski -Mensagem original- De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] discuss.org] Em nome de Gustavo Caetano Enviada em: domingo, 26 de junho de 2005 18:49 Para: 'Gustavo Caetano' Cc: css-d@lists.css-discuss.org Assunto: RES: [css-d] Floating IE problem Hello Thanks to some guys here I've made some progress here. Almost there www.cacofonia.com.br/07 Now just need to make the green box relative positioned. Any tips? Gustavo Caetano -- Pensamentos bonitos e mulheres bonitas jamais perduram - Charles Bukowski -Mensagem original- De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] discuss.org] Em nome de Gustavo Caetano Enviada em: domingo, 26 de junho de 2005 07:05 Para: css-d@lists.css-discuss.org Assunto: [css-d] Floating IE problem Can anyone help me with that one? http://www.cacofonia.com.br/07/ http://www.cacofonia.com.br/07/ The green box is ok in Firefox and Opera, but in IE guess what? Gustavo Caetano -- Pensamentos bonitos e mulheres bonitas jamais perduram - Charles Bukowski __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ E-mail classificado pelo Identificador de Spam Inteligente Terra. Para alterar a categoria classificada, visite http://mail.terra.com.br/protected_email/imail/imail.cgi?+_u=souljacker_l =1,1119780381.785403.10564.malavi.terra.com.br,3468,Des15,Des15 Esta mensagem foi verificada pelo E-mail Protegido Terra. Scan engine: McAfee VirusScan / Atualizado em 24/06/2005 / Versco: 4.4.00 - Dat 4521 Proteja o seu e-mail Terra: http://mail.terra.com.br/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ E-mail classificado pelo Identificador de Spam Inteligente Terra. Para alterar a categoria classificada, visite http://mail.terra.com.br/protected_email/imail/imail.cgi?+_u=souljacker_l =1,1119823515.888957.26353.chipata.terra.com.br,4934,Des15,Des15 Esta mensagem foi verificada pelo E-mail Protegido Terra. Scan engine: McAfee VirusScan / Atualizado em 24/06/2005 / Versco: 4.4.00 - Dat 4521 Proteja o seu e-mail Terra: http://mail.terra.com.br/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] IE white-space: normal
hi Ingo I did not found a workaround yet, maybe it's just hardwired. yes, I think this is just another IE oddity, and probably not worth spending too much time worrying about. My none-too-elegant workaround was to give up on white-space: nowrap and replace the spaces in the top level items with nbsp; Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Still problems with Faux columns
Phil Winter schrieb: ... http://www.webdesignpartners.com/perfect_gift/index.html ... When you view it in FF, the repeating gif does not appear. But, it DOES appear if I put a border around the content_ wrapper div, which I don't want. I don't have a fix yet, I just wanted to say that the bg-image is displayed well in my Fx nightly build (DeerPark) and in my Opera8 copy, but not in Fx 1.0.4. Note: in IE6 XPSP2, the left colum, at the end, shows duplicated characters: d., these are the two last characters from the right column's advertised. http://positioniseverything.net/explorer/dup-characters.html haven't looked at the code yet. Ingo __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problem with IntelliTxt and Google ads on the same page. (Firefox)
I've got a real problem in Firefox (not in IE) where the Google ads jump up when you hover over an IntelliTxt link. This happens when the IntelliTxt code init's as well. It only happens when the Google ad appears in a floated div. This isn't limited to Google ads - some other types of ads also jump up, and I can't see what's causing it. The page is fine without the IntelliTxt links. Here's a full page example: http://www.ecreate.co.uk/itreviews/product_review.htm and here's a stripped-down example: http://www.ecreate.co.uk/itreviews/test.htm I'm working on this for a client, but this IntelliTxt problem has stumped me. Any ideas, anyone? Thanks, Mick -- _ Mick Sear http://www.ecreate.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Z-index on a popup menu
Fixed the z-index problem. I found a good tutorial discussing the handling of z-indexes between different browsers: http://www.aplus.co.yu/css/z-pos/ Cheers, Mike 2005/6/27, Michael Palmer [EMAIL PROTECTED]: To my fellow list readers, I'm fairly new to the list -- thanks to everyone here, this is a great resource. My problem centers around a popup list menu created by embedded lists. Using a tutorial from AListApart, I got it working in Firefox and IE6/PC (target browser), except that the z-indexes don't seem to work in IE 6 / PC. The menu seems to popup behind almost everything, even after specifically declaring z-indexes on the offending elements. Can anyone tell me the reason or suggest a solution for this problem? Any advice would be much appreciated. URL: http://www.bluetree.com.tw/tahanshop/ Cheers, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Width Woes Again
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Sent: Monday, June 27, 2005 4:29 PM To: George Smyth; css-d Subject: Re: [css-d] Width Woes Again George Smyth wrote: I am putting together a site that can currently be viewed at http://sacc-jobfaircom.readyhosting.com/. As far as Firefox is concerned, everything is working just fine. However, in Internet Explorer the three boxes with the images do not fit across. I thought that this might be due to the IE Doubles Float Margin bug, but I added display:inline to the div without any change. Does anyone have an idea as to why the third box is dropping below the other two? If I increase the size of the main div then they fit, but Firefox will show the extra spacing following the third box. Thanks - george first start by validating your html and css. you've got some errors there. hth, dwain hth - I closed the single tag and added alt tags to the images, so things now validate. Cheers - george __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] padding and cell sizes
Eliana Berlfein wrote: Here's a link to the site: http://www.itea-school.com If you look at it on a Mac I'm pretty sure everything looks the way I want it. If you look on a PC it's totally messed up. Looks fine on Firefox 1.0.4 and IE6 on Win XP. -- Will __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Window IE flow problem
Hi Holly,
Thank you for taking the time. I've implemented those suggestions and
am waiting on a couple of friends with XP machines to tell me if IE
gets it right.
cheers,
Saul
On Jun 24, 2005, at 6:25 PM, Holly Bergevin wrote:
From: saul [EMAIL PROTECTED]
Date: Thu, 23 Jun 2005 09:53:44 -0400
the center content area is not flowing properly in IE Windows
(at least from the screen shots some friends have sent me). It appears
to bump down to below the left column content.
http://www.inventionshow.com/development/layout.html
Hi Saul,
A couple of changes and this will probably work for IE (except the
li:hover).
First, you have a selector that I'm pretty sure is written incorrectly
for what you want. -
#sidebarL #img {
margin-left: -5px;
margin-right: -5px;
}
I couldn't find any elements with an ID of img (#img) in your
#sidebarL element, so I'm thinking what you really wanted was -
#sidebarL img {...}
With that change, you also will need to get rid of the margin-left
property -
#sidebarL img {margin-right: -5px;}
Then you'll need a new selector to solve IE's problem with dropping
the content -
#content div img {margin: 0 -3px;}
Finally, at least finally with the browsers I looked at, my (old)
Opera doesn't like the construction of the very first elements in
#sidebarL. If you'll put a break element *after* the non-breaking
space you have between the two images, the appearance in Opera will
improve significantly.
div id=sidebarL
a href=# img [snip]/ /a nb sp; br / img {snip]/
[and the rest of the code - extra spaces are added on purpose so that
MY email program doesn't attempt to render the HTML]
hth,
~holly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Need a drop down menu to work with css sprites
Hi all, I've been Googling this morning for samples/ideas/run-ins having to do with creating a css drop down VERTICAL menu that works with css sprites. If I can at least find a sample I can figure it out from there but have not been able to find one. alistapart is down this morning so can't look there right now. I'm at work - I built a site that has 4 image sprite rollovers but I didnt know they needed to be drop downs until just now. They are not all the same width so not sure if that will be a problem. Shouldnt be. I dont mind if there is a small amount of javascript but would rather it be largely css. Thanks for any help, David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] link list problem in IE_ from yesterday
Hello, I have nailed down most every other issue but one. In FF all looks fine (to me), but in Internet Explorer 6 the links in the right side are messed up. When I initially go to the page the links seem fine (white with no underline), but as soon as I click they turn gray and underlined. This is not a style I use. Can anyone please take a looksy? Thanks http://www.rocklinsystems.com/infinity/about.htm CSS- http://www.rocklinsystems.com/infinity/styles/infinitystyles.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: RES: [css-d] Floating IE problem
Gustavo Caetano wrote: Can anyone please help me in that one? I can't figure out how to put it working in IE. Hello Thanks to some guys here I've made some progress here. Almost there www.cacofonia.com.br/07 Now just need to make the green box relative positioned. Any tips? Hi Gustavo, I'd like to try, but I'm getting a 404 error. cheers, gary -- Anyone can build a usable web site. It takes a graphics designer to make it slow, confusing, and painful to use. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] link list problem in IE_ from yesterday
in Internet Explorer 6 the links in the right side are
messed up. When I initially go to the page the links seem fine (white
with no underline), but as soon as I click they turn gray and
underlined. This is not a style I use. Can anyone please take
a looksy?
Thanks
Adam-
You need to explicitly define a visited link style for that right column:
#rightcol li a:visited {
color:#FF;
text-decoration: underline;
text-decoration: none;
font-family: Times New Roman, Times, serif;
font-weight: bold;
font-size: 12px;
font-style: normal;
}
The above I just grabbed from your a:link style, so you'll want to change
those values to whatever you want.
I believe the menu is just picking up the visited style from your content
area.
Regards,
Ron
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] column wont move to left
Erland Flaten wrote:
I want the first column - the one at left with the navigation buttons
- to start at det very beginning of the left side of the browser.
Cant manage that to happen. The CSS is from one of Douglas
Livingstones fine ones. I dont understand this column model very well
but still I use them and try to learn some. I hav a feeling that this
is good model :)
thanks for any help.
http://www.kariutgaard.no/
and the stylesheet
http://www.kariutgaard.no/3sp_likhoyde.css
#navlist is abutting the left edge. It's the ul itself that has left margin.
#navlist ul {
padding: 0;
list-style-type: none;
font-size: 0.9em;
margin: 0em 1em; ---
}
cheers,
gary
--
Anyone can build a usable web site. It takes a graphics designer to
make it slow, confusing, and painful to use.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] link list problem in IE_ from yesterday
I'm not an expert but several things:
1) the CSS does not validate. Several complaints but the #rightcol li
a:link had text-decoration is defined multiple times in the same rule
2) I found the #rightcol li a:link CSS in the CSS 3 times -- the same code
#rightcol li a:link {
color:#FF;
text-decoration: underline;
text-decoration: none;
font-family: Times New Roman, Times, serif;
font-weight: bold;
font-size: 12px;
font-style: normal;
}
3) And the last time is AFTER the #rightcol li a:hover. Remember the
LoVeHAte rule:
link visited hover active
Even if you don't use all of those, you should stick to the same entry in
the CSS; i.e., don't put the link after the hover.
L.Peach
-Original Message-
From: Adam Helweh [mailto:[EMAIL PROTECTED]
Sent: Tuesday, June 28, 2005 9:02 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] link list problem in IE_ from yesterday
Hello,
I have nailed down most every other issue but one. In FF all looks fine (to
me), but in Internet Explorer 6 the links in the right side are messed up.
When I initially go to the page the links seem fine (white with no
underline), but as soon as I click they turn gray and underlined. This is
not a style I use. Can anyone please take a looksy?
Thanks
http://www.rocklinsystems.com/infinity/about.htm
CSS- http://www.rocklinsystems.com/infinity/styles/infinitystyles.css
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] stretching a div, disappearing content
In the page http://www.biotext.com.au/test0205/columns20.html when you resize the page, it's okay till it gets to about 400 px wide then the content (the stuff in the 'main' div) just disappears in IE 5 and IE6 windows. I put 'position: relative' in the style for 'main' because otherwise the tables are coming out into the side margins in IE6. In IE6 I have a style for the top navbar that puts a border under it. This is in the IE6 conditional comment after the main styles. I'm trying to make the border (or in fact the topnavbar div) stretch from 20 pixels in from the left of the page to a couple of pixels to the left of the logo. The left margin works okay but I can't get it to stretch across and stop where I want it to on the right. Is it possible? (I have stopped trying to make the border work in Firefox and IE5, as most users of the site are likely to be using IE6 and that's the one where the display is more important). Thanks Maren Jack B. Child [EMAIL PROTECTED] www.starbytes.com.au __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Floating 2 divs side by side that go underneath each other when browser screen shrinks
Sorry for long title folks. Does anyone know if it is possible to float 2 divs next to each other taking up 50% of the screen each, until the screen size starts to shrink, then they list vertically (like on top of each other). This would happen say when the user gets to 800x600 resolution or something. Its a tough one, as far as i can see, because when od you want the divs to flip underneath each other instead of being side by side Any ideas appreciated. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floating 2 divs side by side that go underneath each other when browser screen shrinks
stu wrote: Sorry for long title folks. Does anyone know if it is possible to float 2 divs next to each other taking up 50% of the screen each, until the screen size starts to shrink, then they list vertically (like on top of each other). This would happen say when the user gets to 800x600 resolution or something. Its a tough one, as far as i can see, because when od you want the divs to flip underneath each other instead of being side by side Any ideas appreciated. In each div use min-width: 400px Regards Dave -- - Dave Kimberley Tel: +44 1785 785489 System Administrator Fax: +44 1785 785401 Marconi Pensions Office http://www.marconi-pensions.co.uk - __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] positioning problem in Safari
Hello to all,
I've run into a positioning problem in Safari 1.0.3
on Mac OS X (10.2.8) that I haven't been able to solve yet without breaking the
page in other browsers (testing on my mac and my pc plus Browsercam so that's a
lot of browsers to break).
A page title that's supposed to be located just
above the left navigation is starting at upper
right instead and then continuing in the place where it's supposed to be.
Apparently it's too long to
ALL fit in the wrong place. ;)
Beware of truncated URLs below due to my mail program
splitting them onto 2 lines.
The page is:
www.rx.uga.edu/main/home/redesign/ce.html
CSS is:
www.rx.uga.edu/main/home/redesign/ce.css
Code in question is:
#pagetitle h1 {
background-color: #e0e0e0;
margin: 0;
padding-left: 4px;
font: bold 16px Verdana, Arial, Helvetica, sans-serif;
color: #369;
line-height: 150%;
}
Thanks for any advice!
Regards,
Jeanne
Jeanne Prine, Webmaster
University of Georgia
College of Pharmacy
[EMAIL PROTECTED]
phone 706-542-5354
fax 706-542-5269
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] footer fumble in FF part II
Well I got everything else nailed down thanks to a number of very smart people here. But my footer seems to be off in FF. I think its fine in IE. Can someone peek? My code validates now as well http://www.rocklinsystems.com/infinity/communities.htm Adam __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stop text from wrapping around a floated image?
Is there any way to stop text from wrapping ar4ound a floated image? In my example, I have a list with images and text in, and the images are floated to the left. This then means that the text, if it is long enough, wraps around the underneath of the image. I am wondering if there is any graceful way to stop this without wrapping the text in a div (or maybe a p) as well and floating that to the right. Why not just put the text in a paragraph, it's difficult to know why this might be semantically dubious without seeing the page, then give that paragraph a left margin? Phil Wills __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Nested List YADM menu problem with IE
Hello all, I have been playing with this menu for 4 days, starting over twice and it's about to drive me insane. I've gotten my YADM menu almost complete. It works and looks great in most browsers, except IE. I'm getting a funny 2-3 pixel margin at the top of the nested ULs on the javascript menu. You can see it if you hover over the menu on the left of the page. I've adjusted the margins, the heights, the padding, everything. I've stripped it out of the page to display it by itself, and it still gives me that 3 pixel problem... I have placed the UL menu in the #leftcolumn container, and have already set up the non-javascript version to look perfect on all browsers... Can anyone help me? HTML page http://www.uark.edu/depts/gradinfo/test/gradmockup05a.html CSS page http://www.uark.edu/depts/gradinfo/test/gradmockup05a.css Thanks in advance, --- David Boddie, Webmaster, Graduate School University of Arkansas | #6 Dickson Street Annex Fayetteville, Arkansas 72701 Phone: 479-575-6184 | email: [EMAIL PROTECTED] --- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Floating 2 divs side by side that go underneath each otherwhen browser screen shrinks
stu wrote: Does anyone know if it is possible to float 2 divs next to each other taking up 50% of the screen each, until the screen size starts to shrink, then they list vertically (like on top of each other). This would happen say when the user gets to 800x600 resolution or something. Its a tough one, as far as i can see, because when od you want the divs to flip underneath each other instead of being side by side You can see my best solution to a closely related problem at http://coaching-life.com/css/sample.html. It does do the wrapping thing when the screen gets small enough, but I don't know any way to control when it will wrap. This whole techique is very subject to font size, and behaves differently on different browsers. The big problem is that I cannot get the elements to add up to 100%. If they total 90% or less the behavior is pretty predictable for most font sizes and screen sizes on both Firefox and IE6. Anything more that about 97% destroys the affect and the boxes just wrap. In between, it works at some combinations of font and screen sizes and then fails at others. My best guess at this point is that margins and padding settings affect the calculations since almost any margin setting desrtoys the effect at a lower percentage. I have posted two questions to this list, but so far no one has answered either. So maybe someone has some ideas and has not yet chimed in. HTH, -- Will __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] an absolutely positioned a to 100% of parent
On Jun 27, 2005, at 9:35 PM, Richard Grevers wrote: On 6/28/05, Charles Stuart [EMAIL PROTECTED] wrote: Hi, I need to set an absolutely positioned a to the same height as the parent div. Or... find a different way to do this. I have accomplished this in Safari and FF. IE is not working. *my attempts so far* So far my attempts have relied on setting the specific a to height: 100%; and then based on this article: http://www.quirksmode.org/css/ 100percheight.html, I've tried setting body and html to 100% height to find the effects. If I set the body, the html and the div surrounding the photo to 100%, than IE 6 does a real shoddy job setting the a to 100% and hence solving my issue (it seems to be undecided if it really is extending the size of the a to the 'correct' area). However, then the div wrapping the photo stretches in height and it looks like crap. *what i want to accomplish* http://www.dbowman.com/photos/london05/gallery/img_1012jpg.php That's it... Click the left side of the image to go back, click the right to go forward. The a's hover area should extend the entire half of the image. I'm pretty sure I can do all of this with some PHP in the CSS file, but I'd rather learn the CSS. Try setting display:block on the a, height is not supposed to work for inline elements -- Very good point, although it did not fix IE. Thanks for the help. best, Charles __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Nested List YADM menu problem with IE
The roll over is veryslow. You migth optimize it., i've not look the code yet 2005/6/28, David Boddie [EMAIL PROTECTED]: Hello all, I have been playing with this menu for 4 days, starting over twice and it's about to drive me insane. I've gotten my YADM menu almost complete. It works and looks great in most browsers, except IE. I'm getting a funny 2-3 pixel margin at the top of the nested ULs on the javascript menu. You can see it if you hover over the menu on the left of the page. I've adjusted the margins, the heights, the padding, everything. I've stripped it out of the page to display it by itself, and it still gives me that 3 pixel problem... I have placed the UL menu in the #leftcolumn container, and have already set up the non-javascript version to look perfect on all browsers... Can anyone help me? HTML page http://www.uark.edu/depts/gradinfo/test/gradmockup05a.html CSS page http://www.uark.edu/depts/gradinfo/test/gradmockup05a.css Thanks in advance, --- David Boddie, Webmaster, Graduate School University of Arkansas | #6 Dickson Street Annex Fayetteville, Arkansas 72701 Phone: 479-575-6184 | email: [EMAIL PROTECTED] --- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org http://evolt.org -- http://www.evolt.org/help_support_evolt/ -- Guillaume Aveline __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Firefox strangeness with link and title attribute
I noticed a strange problem this morning with firefox regarding how it loads external stylesheets that are specified using the html link element when the title attribute is given a value. I like to use the title attribute to give descriptive names to my stylesheets so that I can find the correct link quickly when running through my markup. Anyway, Firefox (I'm using 1.0.4) will load only the first stylesheet listed if the title is given any value other than the string Default. If all are given the Default value, all of them will load, but if any of the links in the list are given another value, Firefox will not load any more stylesheets after that link. IE6 does note exhibit this same behavior, but loads all of the stylesheets regardless of the title value. Is there a reason for this, or is it just a parsing bug? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Width Woes Again
From: George Smyth [EMAIL PROTECTED]
I am putting together a site that can currently be viewed at
http://sacc-jobfaircom.readyhosting.com/.
in Internet
Explorer the three boxes with the images do not fit across.
The xml declaration at the beginning of your page has put IE6 into
quirks rendering mode. In this mode, IE6 uses the same broken box model
as it's predecessors.
~holly wrote:
To fix this (for IE6) you can remove the xml declaration. Alternately,
you will need to write separate width settings for the IEs as you have
discovered since both IE5 and IE5.5/Win display the same way that IE6
does now. You can use the Tan hack (star HTML selector bug) to target
only IE, however you'll probably want to hide that from IE5/Mac, as it
doesn't have an incorrect box model rendering.
George replied:
I would really like to work with it, so I will
see if I can get the Tan hack to work (I was not able to get this to
work properly the last time I tried, but will give it another shot).
Hi again George,
The first thing you will need to do on the road to getting the Tan hack to work
is remove your (inline)styles from your HTML page to a separate style sheet,
either embedded in the head of the document, or stored as a separate,
linked/imported sheet. The Tan hack needs to work from a style sheet.
After you've done that, (which will probably require some classes/IDs being
added to your HTML so you can target the elements you need to) the Tan hack
should be pretty easy to write, something like -
/* \*/
* html [the ID or class you chose for the container] {width: 478px;}
/* */
I forgot before, (I guess because I don't like to use it so I don't think of it
as a solution), there is another way you can probably do this and retain the
inline styles if you want. After the width:472px; that you have in the style
attribute of that container div, you can add the following -
_width: 478px;
IE/Win will read this. So the opening tag of that div would look like (extra
spaces in tag added by me) -
div style=border: 1px solid rgb(0, 0, 102); margin: 0pt auto; padding: 2px;
width: 472px; _width: 478px;
Note also that because of the quirks mode, IE6 will not center your lower divs
(the ones with the text in paragraphs) with the auto margins you are using on
them. The IE5s won't do it anyway, so you will probably need to rethink how you
are going to accomplish that if you want the spacing that is visible in other
browsers.
hth,
~holly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Floating 2 divs side by side that go underneath each otherwhen browser screen shrinks
Does anyone know if it is possible to float 2 divs next to each other taking up 50% of the screen each, until the screen size starts to shrink, then they list vertically (like on top of each other). This would happen say when the user gets to 800x600 resolution or something. Hi Stu, I did a similiar thing a while back, but I had an H1 at the top of both divs which I used to 'control' the wrapping. I used a min-width for Firefox, and padding for IE (I didn't have to worry about IE5.0) but maybe the concept will head you down a path? div style=float: left; width: 50%; min-width: 30em; margin: 0; padding: 0;h1 style=padding-right: 20em; white-space: nowrap; font-size: 1.0emFirst Heading/h1/div div style=float: left; width: 50%; min-width: 30em; margin: 0; padding: 0;h1 style=padding-right: 20em; white-space: nowrap; font-size: 1.0emSecond Heading/h1/div HTH, Janet __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox strangeness with link and title attribute
On 6/28/05, Viascape List [EMAIL PROTECTED] wrote: I noticed a strange problem this morning with firefox regarding how it loads external stylesheets that are specified using the html link element when the title attribute is given a value. I like to use the title attribute to give descriptive names to my stylesheets so that I can find the correct link quickly when running through my markup. Anyway, Firefox (I'm using 1.0.4) will load only the first stylesheet listed if the title is given any value other than the string Default. If all are given the Default value, all of them will load, but if any of the links in the list are given another value, Firefox will not load any more stylesheets after that link. IE6 does note exhibit this same behavior, but loads all of the stylesheets regardless of the title value. Is there a reason for this, or is it just a parsing bug? http://www.w3.org/TR/html401/present/styles.html#specifying-external Regards, Rimantas -- http://rimantas.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] div height problems in Firefox 1.0.4
From: Joe Cool [EMAIL PROTECTED]
Good day and I have a little div height rendering problem with Firefox
http://www.spiritquestdayton.org/dev/
If you view the page, you will see how the parent-container does not
stretch past the bg-container. I would like to have the
parent-container stretch to the very bottom.
Hi Michael,
See if you can get the rendering you desire by removing {height: 100%;} from
#parent-container. Other people are better at explaining why this is than I am,
but for the purposes of your display, that height is the height of the
viewport, which is not what you want.
hth,
~holly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] css and moodle
I'm currently doing a customization on the css for moodle. There is a LARGE amount of tidying that could be done, I'm just wondering if it's worth it. currently there are three css files (2k, 5k, 23k). thanks muchly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Still problems with Faux columns
Phil Winter schrieb: ... http://www.webdesignpartners.com/perfect_gift/index.html ... When you view it in FF, the repeating gif does not appear. But, it DOES appear if I put a border around the content_ wrapper div, which I don't want. I don't have a fix yet, I just wanted to say that the bg-image is displayed well in my Fx nightly build (DeerPark) and in my Opera8 copy, but not in Fx 1.0.4. Note: in IE6 XPSP2, the left colum, at the end, shows duplicated characters: d., these are the two last characters from the right column's advertised. http://positioniseverything.net/explorer/dup-characters.html In addition to what Ingo pointed out about the duplicated characters, have you tried simply putting a character (such as a non-breaking space) in your clearing element, rather than simply physical space? (extra spaces below are mine) - div class=clearfloats nb sp; /div hth, ~holly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] [Printing problems with DL/DT/DD for numbered paragraphs] rides again...
Friends, This is a continuation of the page looks fine but printing is screwed up thread... In response to the suggestion from Peter Williams I removed the xml line from the top of the file. I appreciate the suggestion and the education, but it has made no difference in the outcome. The illustrative sample (http://www.h4c.org/testing/test-case.html) validates, and has its CSS in-line. I'm satisfied with this general approach (using definition lists) for having numbered text paragraphs, as it appears to scale well, given that even what I would think of as ridiculously large font sizes (e.g. 38 px) for visually impaired users. Likewise, it requires only a bare minimum of markup to achieve the desired result, in contrast to the use of tables, and in fact even in contrast to the use of floated divs. Note that in this instance, since the numbers are not properly part of the text, I wanted to distinguish that visually; an ordinary OL would not allow that, and in any case the material with which I am working offers a lot of complexities. Not every document can be numbered in simple numeric sequence, and aesthetically I prefer to choose one solution that will handle all situations, rather than having several solutions, depending... (It is certainly not essential to the technical issues, but if anyone is interested, a more complex, real-world example of how I intend to use this is found at http://www.h4c.org/testing/html/20020410.html. I've no doubt made some tyro errors, but I've tried to keep everything proportional for future scaling via JS and manipulations of the CSS.) If the problems with printing can be solved, it looks as though this approach could provide a useful solution to certain classes of multiple item, two column text problems, such as building questionnaires, offering screenplays, etc. Those of us who come to this list, hat in hand, should expect to give something back. Perhaps this approach would be of modest use to others, assuming that the printing problems are resolved/resolvable. The overall cannot print difficulty, I am well nigh convinced, has to do with the user agent wanting to put the entire definition list on one page-- treating it as one unit-- and as such short test cases (1 page) do not demonstrate it. (It makes some modest sense to me that the UAs would try to keep the contents of a DT/DD pair together on one page, but the whole list??) When trying to print a longer definition list-- i.e. which exceeds one page-- the UAs are (mostly) acting thus (http://www.w3.org/TR/css-print/#s.8.2): If page-break-inside: avoid is specified for a long element and the printer is unable to buffer the entire element before committing it to paper, it SHOULD force a page break to occur before the long element and begin the element starting at the top of the next page. If the long element starts at the top of a page and exceeds the page length, the printer SHALL print as much as possible on the first page and then resume that element on the next and subsequent pages as REQUIRED to preserve the content. As I said, both FF and IE (1.0.4 and 6.0.2 on XP; test browsers most readily available to me) appear to consider the whole definition list as one long element, and are only mostly following the process listed in the spec (albeit I've not found any spec that specifies this behavior for definition lists). In other words, it seems that both IE and FF try to assemble the page, but, for a long list with the CSS as last submitted (i.e. http://archivist.incutio.com/viewlist/css-discuss/59495), these UAs want to put a page break as the first element of every page-- and so they loop. Different buggy output occurs-- a few all blank pages; far too many blank pages; FF freezing; strange page breaks; truncated printout of the list; etc.-- depending on the specifics of the CSS used (i.e. using page-break-inside:auto; in the DL element, or using page-break-after: always; in the DD element)... I've not found anything via Google et al about what should happen with a 1 page definition list, nor about this specific problem. Anyone? I have found several ways to avoid having FF freeze as it ponders the problem of its infinite must put all this on the next page loop (the best one is shown in the in-line CSS), but so far, no joy at getting what would seem to be the desired result, which is pages with text that are well filled within the margins specified by the browser... The present sample will not freeze FF, but removing the page-break directive from the CSS will cause that... Thoughts? If this can be fixed, then great, but if not, would anyone out there in expert land wish to venture an opine about other/better ways to accomplish the overall goal, which is having numbered text paragraphs. d. David William House AllHear, Inc. P.O. Box 330 / 23022 Yeary Lane N.E. Aurora, OR 97002-0330 USA (503) 266-6730 (voice) / (503)
Re: [css-d] stretching a div, disappearing content
Maren Child schrieb:
In the page http://www.biotext.com.au/test0205/columns20.html when you
resize the page, it's okay till it gets to about 400 px wide then the
content (the stuff in the 'main' div) just disappears in IE 5 and IE6
windows. I put 'position: relative' in the style for 'main' because
otherwise the tables are coming out into the side margins in IE6.
for this part of your post:
Never let a block position:relative without a dimension in IE6. Let the
block gain layout via #main {height:1%} in your conditional comment section.
Another reason for some content of your site becomes invisible are font
settings like x-small for navigation links.
Ingo
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] [Printing problems with DL/DT/DD for numbered paragr aphs] rides again...
Thoughts? If this can be fixed, then great, but if not, would anyone out there in expert land wish to venture an opine about other/better ways to accomplish the overall goal, which is having numbered text paragraphs. d. David William House David- I didn't catch the beginning of this thread, so perhaps I'm missing something, but I don't see the logic or reason behind the use of a definition list for numbered paragraphs. As you have it now, the dt has little meaning or relation to the dd. The number is hardly a term and the paragraph doesn't describe it. You could easily achieve the same thing by simply marking up the paragraphs as p's and using a span with an assigned class to style each number. Better yet, designate each number as a header (h2, h3, whatever) and follow it with the paragraph. I think the header/paragraph would make the most sense in a non-visual way. Ron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Float help
On Mon, 27 Jun 2005 16:19:51 -0400, Tom Livingston [EMAIL PROTECTED] wrote: Hello list, I am having trouble with a layout. If you use FF and have Web Dev toolbar you will see my dilemma. I can't find where the text under the thumbnails is getting the huge width from. I'm sure it is something stupid. http://www.petticoatjewels.com/test/designs.htm TIA I solved my initial problem, but am not sure if my fix will make anyone clasp a hand over their mouth to keep the last thing they ate from getting on their shoes. Please take a peek if you have the time and also let me know, if possible, how to get rid of the extra space to the left of the images. They should line up, on the left, with the paragraph above them. TIA -- Tom Livingston Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Subject: RE: [css-d] a:hover border-bottom not showing up in IE?
From: Peter Williams [EMAIL PROTECTED]
Have you turned off the default underlining ofr links in the div?
#nav a {text-decoration:none;}
Peter, I have now added the text-decoration:none; to both relevant
sections of the css file but I still do not see a bottom border in IE.
Here are the new relevant sections:
div#nav
{
position: absolute;
top: 90%;
left: 3%;
z-index: 2;
}
div#nav a
{
color: black;
background-color: white;
margin: 2em 0.5em;
padding: 0.10em 0.30em;
text-decoration: none;
font-family: helvetica, sans-serif;
font-size: 14px;
z-index: 3;
filter: alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
border-top: 2px solid #00;
border-bottom: 2px solid #00;
border-left: 2px solid #00;
border-right: 2px solid #00;
}
div#nav a:hover
{
text-decoration: none;
border-style: dashed;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
Additionally i see that you have the class named #nav a rather than
div#nav a, is there a difference? should i be doing things one way or
the other?
-jason
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] footer jumble
On Tue, 28 Jun 2005 07:07:32 -0700, Adam Helweh wrote:
Also, can anyone take a look at my footer and suggest a good method
to place it centered outside of the white area?
http://www.rocklinsystems.com/infinity/about.htm
Hi Adam,
Moving your #footerinternal DIV to the end of the #leftcol DIV and
adjusting the CSS seems to do it. Try:
#footerinternal {
background-color: #8C2328;
position: relative;
font-family: Arial, Helvetica, sans-serif;
color: #FF;
font-size: x-small;
line-height: 1.5em;
font-weight: bold;
height: 50px;
/* - remove these :
width: 665px;
margin: 0px auto;
clear:both;
- add this : */
text-align:center;
}
It _appears_ outside because of the background-color.
I hope this is what you meant.
Cordially,
David
--
David Hucklesby, on 6/28/2005
http://www.hucklesby.com/
--
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Float help
From: Tom Livingston [EMAIL PROTECTED] http://www.petticoatjewels.com/test/designs.htm how to get rid of the extra space to the left of the images. They should line up, on the left, with the paragraph above them. Assuming the problem is in IE/Win (my Mozilla looks fine, as does Opera) please see - http://www.positioniseverything.net/explorer/doubled-margin.html hope that helps, ~holly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Overlapping divs
In a link list I have on my site I have a problem in
Mozilla browsers..The title
line(style=searchtitleevent) is wrapping on lower
screen recolutions...and overlapping the next div
(searchvenue) causing an unplanned and annoying
effect.
Here is the URL:
http://www.english.heacademy.ac.uk/explore/events/archive/2004.php
and the HTML:
div class=searchresult
div class=searchtitleeventa
href=topics/newlect1.phpTraining Event for New
Lecturers/a/div
div class=searchvenue
emstrongVenue:/strong/em Birmingham Conference
Park - December 2004/div
div
class=searchurlemstrongTheme:/strong/em a
href=newlect.phpNew Lecturers/a/div
/div
the styles are as follows:
.searchresult {
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFCC33;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
background-color: #FAF0D0;
}
.searchtitleevent {
text-decoration: none;
background-image: url(../images/icons/events.gif);
background-repeat: no-repeat;
background-position: left top;
padding-left: 25px;
padding-right: 95px;
font-weight: bold;
height: 20px;
position: relative;
}
.searchvenue {
padding-left: 25px;
padding-bottom: 3px;
}
.searchurl {
padding-left: 25px;
padding-bottom: 3px;
}
I would appreciate any pointers as to what I am doing wrong.
___
How much free photo storage do you get? Store your holiday
snaps for FREE with Yahoo! Photos http://uk.photos.yahoo.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE: Stretched Image as background in IE?
I am trying to make a stretched background fill the viewport. The
desired effect is to have an image stretched to 100% of the viewport's
width and have a 94% height. Additionally i want to vertically center
the image. I'm not sure if i'm attempting this effect correctly, so feel
free to suggest alternative solutions. I am having trouble making an
image's height stretch to a specific dimension in IE, but width
stretching and the top offset of 3% are working fine. The effect works
fine in firefox but IE just leaves the images height as it was.
Test Page: http://www.onejasonforsale.com/test.html
Test Css : http://www.onejasonforsale.com/test.css
Relevant Html:
div
img alt=backgroundphoto id=bgimage src=jason.jpg /
/div
Relevant Css [the whole file..]:
BODY
{
background: white;
margin:0%;
padding:0%;
}
img#bgimage
{
z-index: 1;
position: absolute;
left:0%;
right:0%;
width: 100%;
top: 3%;
bottom: 3%;
height: 94%;
border-bottom: 3px ridge white;
border-top: 3px ridge white;
}
thanks!
- jason
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] horizontal border in a liquid layout
I have fixed the problem I had with disappearing content (thanks Ingo) but
after several more versions
still can't get the green border under the 'topnavbar' div to stretch so it
goes across to just before the logo.
I guess what I want to say is 'width = 100% minus 140 pixels' and
'margin-left = 30 pixels'.
The css that's operating on it is:
#logosymbol { position: absolute; right: 50px; top: 48px; width: 88px;
height: 182px;
}
#topnavbar { position: absolute; top: 177px; margin-left: 30px; height:
48px;
width: 83%;
background-image: url(bar.gif); background-repeat: repeat-x;
background-position: right bottom;
}
and in the ie6 conditional comment, these are in a 'header' div with 100%
width.
The 83% width works at a screen resolution of 1024 but starts overlapping as
soon as you make the window a bit smaller.
Is it possible to do this at all or should I just give up trying?
The page is at http://www.biotext.com.au/test0205/columns22.html
Thanks
Maren
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] One Header And Footer for Site Using CSS?
Hello: I've been lurking in this forum for a few weeks now and need to ask a question. I had someone I work with convert my Website to ASP.NET. The main goal was to have one static header and footer file with many content pages. The ASP.NET would render the page by piecing together the header, content, and footer. This relationship has gone sour and I do not know ASP.NET, so need to convert everything back to XHTML. Yes, I know. Many lessons learned through this experience. ;-) My question is this, is there a way to accomplish the original goal of maintaining the site with one header and footer file using CSS? Thanks! Debbie Silbert __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] link list problem in IE_ from yesterday
From: Adam Helweh Internet Explorer 6... as soon as I click they turn gray and underlined. This is not a style I use CSS- http://www.rocklinsystems.com/infinity/styles/infinitystyles.css Define the a:active pseudo class for the links. At present you are seeing the IE default display for this state. Order of defining the link states should be LVHA. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] site check - real estate site
Hello All... Thanks for the gracious help of others I finally got the site where I need it to be. Its filled with filler content of course, but all needed pages are up (and look the same). Let me know what you think. http://www.rocklinsystems.com/infinity/ Thanks Adam __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] [Printing problems with DL/DT/DD for numbered paragraphs] rides again...
From: Pringle, Ron ...I don't see the logic or reason behind the use of a definition list for numbered paragraphs. As you have it now, the dt has little meaning or relation to the dd. SNIP Better yet, designate each number as a header (h2, h3, whatever) and follow it with the paragraph. I think the header/paragraph would make the most sense in a non-visual way. David, When I was managing a large collection of policy and instructional documents (where the authors of the original MS Word versions just loved numbered paragraphs) I used a H4 P combo as suggested by Ron. I agree with him that, sematically, your DL method is less than optimal. You really should *describe* the document elements with your markup, not just use what allows pleasing appearance in some output media. This part of the discussions is off-topic though, so I don't think we can progress it here. webdesign-l is a place where you will get considered and practices opinions on the markup choices that could best suit your purpose, and which may also allow for styling the output in ways that satisfy your desire for a certain layout. http://www.webdesign-l.com/ -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: Subject: RE: [css-d] a:hover border-bottom not showing up in IE?
From: Jason Baker Peter, I have now added the text-decoration:none; ...still do not see a bottom border in IE. Additionally i see that you have the class named #nav a rather than div#nav a, is there a difference? should i be doing things one way or the other? I noted that another list member offered the information that the bottom-border problem disappeared when the text size was increased. So it is probably just a display glitch/artifact, rather than any markup of css error on your part. div#nav is more explicit and specific that #nav. If you define #nav you could use it on a div, p, h, whatever. If you define div#nav then all it can be is a div. There is no practical difference, but #nav offers more versatility, your way offers more specificity, but sinece an ID can only occur once per page it is hard to imagine why you'd need to do it that way. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] site check - real estate site
Nice design but it does load slowly on a dial-up connection. There isn't any text for your images which will help. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: June 28, 2005 7:47 PM To: css-d@lists.css-discuss.org Subject: [css-d] site check - real estate site Hello All... Thanks for the gracious help of others I finally got the site where I need it to be. Its filled with filler content of course, but all needed pages are up (and look the same). Let me know what you think. http://www.rocklinsystems.com/infinity/ Thanks Adam __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Absolutely positioned menu displays in FF but not IE
Hi, The site I'm working on has an absolutely positioned menu at the top of each page. However, within the markup, the menu is actually at the end of the page. The menu (#smenu) shows correctly in Firefox but not in IE. It's easier for me to show you my problem than put in into words, so please point IE and Firefox to http://beta.quattro.com.my to observe the problem. Now you see it (in Firefox), now you don't (in IE). My CSS file is located at http://beta.quattro.com.my/assets/styles.css I'm actually trying to emulate the menu positioning from Doug Bowman's Stopdesign (I only refer, never copy). In his site, Doug places #cnav right at the top with absolute positioning, but within the markup it is actually down at the footer. What am I doing wrong? How can I make IE display the menu? Any help is much appreciated, David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] horizontal border in a liquid layout
From: Maren Child ...green border under the 'topnavbar' div I guess what I want to say is 'width = 100% minus 140 pixels' and 'margin-left = 30 pixels'. So if you remove the width and just give it left and right margins of 30 and 140 px what happens? -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Mac/ie5.2-Saf::Win/ie5x
re: Mac/ie5.2. Safari. Win/ie5x. About all I can tell from browsercam is that the header is not upside down. A quick look, and any correction(s) always appreciated. http://www.dlaakso.com/sandbox/css.html (min-max 600-1000 :: 200% zoom :: div:hover) Thanks. David Laakso -- http://www.dlaakso.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [Printing problems with DL/DT/DD for numbered paragr aphs] rides again...
On 28/06/05, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: As regards the second approach, it may have use and merit, but its not clear to me how to produce a paragraph with a hanging indent, so that one has what in essence has two columns where one is dedicated to numbering, and the other is dedicated to text, which scales well across a large range of font sizes, and which minimizes markup: == | 1. | This is some text. This is some text. This is some text. | | This is some text. This is some text. This is some text. | | This is some text. This is some text. This is. | 2. | This is different text. This is different text. This is different | | text. This is different text. This is different text. This is dif- | | ferent text. This is different text. This is different text. This. == A hanging-indent can be achieved by using the text-indent property and assigning it a negative value. What would be tricky in the above would be aligning the beginning of the text following the number with the left edge of the other lines. hth, T. R. Valentine __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] [Printing problems with DL/DT/DD for numbered paragraphs] rides again...
From: T. R. Valentine
A hanging-indent can be achieved by using the text-indent property and
assigning it a negative value. What would be tricky in the above would
be aligning the beginning of the text following the number with the
left edge of the other lines.
Back on css topic :-)
How about the css2 first-line pseudo-element?
5.12.1 The :first-line pseudo-element
The :first-line pseudo-element applies special styles to the first formatted
line of a paragraph. For instance:
p:first-line { set your hanging indent here; }
You'd need to test the bowser support amongst your intended user base.
--
Peter Williams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Eric Meyer thumbnail gallery
Hello folks,
There is a very nice thumbnail gallery in the More Eric Meyer on CSS book,
which I have temporarily posted here for easy reference:
http://stinkyrat.com/proj02/ch0207.html
My question: Is there any way to align the thumbnails along one baseline? I
think it's a great layout aside from the horizontal alignment, and I know of
no solution to fix thisurgh!
This is the relevant CSS:
div.pic {float: left; height: 130px; width: 130px;
padding: 15px; margin: 5px 3px;}
div.pic img {border: 1px solid; border-color: #444 #AAA #AAA #444;}
div.ls img {height: 96px; width: 128px; margin: 16px 0;}
div.pt img {height: 128px; width: 96px; margin: 0 16px;}
div.pic ul {display: none;}
Any help would be much appreciated!
D o u g l a sN i v e n
photo researcher/editor
http://www.anothervietnam.com
Another Vietnam: Pictures of the War from the Other Side
* from National Geographic Books *
Vietnam's Unseen War: Pictures from the Other Side (DVD)
*from National Geographic TV*
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal border in a liquid layout
Maren Child wrote:
I have fixed the problem I had with disappearing content (thanks
Ingo) but after several more versions still can't get the green
border under the 'topnavbar' div to stretch so it goes across to just
before the logo.
Think you've got it the wrong way around. The green border should start
at the logo, and stretch to the left. The rest is just adjustments to
make it look right.
The following is based on this page:
http://www.biotext.com.au/test0205/columns_25.html
#topnavbar {position: absolute;
top: 177px;
right: 130px;
height: 48px;
background-image: url(bar4.gif);
background-repeat: repeat-x;
background-position: right bottom;
width: 100%;
z-index: 1;
}
#whitebg { float: left;
width: 160px;
height: 48px;
background-color: #fff;
}
...and a proper doctype that the browsers will honor. I used:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
Safari, Firefox, Opera, IE6 and IE/Mac seems to be happy with it -
regardless of page-width above 600px.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Eric Meyer thumbnail gallery
Change:
div.ls img {height: 96px; width: 128px; margin: 16px 0;}
to
div.ls img {height: 96px; width: 128px; margin: 32px 0 0;}
--
http://www.mozilla.org/products/firefox/ - Get Firefox!
http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE: Stretched Image as background in IE?
Jason Baker wrote: I am trying to make a stretched background fill the viewport. The desired effect is to have an image stretched to 100% of the viewport's width and have a 94% height. Additionally i want to vertically center the image. I'm not sure if i'm attempting this effect correctly, so feel free to suggest alternative solutions. I am having trouble making an image's height stretch to a specific dimension in IE, but width stretching and the top offset of 3% are working fine. The effect works fine in firefox but IE just leaves the images height as it was. Test Page: http://www.onejasonforsale.com/test.html Test Css : http://www.onejasonforsale.com/test.css You need to give a 100% height for the body so IE has something to calculate against. Big John -- Perennial student + Impractical joker + CSS junkie = Big John http://www.positioniseverything.net Yahoo! Sports Rekindle the Rivalries. Sign up for Fantasy Football http://football.fantasysports.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Eric Meyer thumbnail gallery
On 6/29/05, Doug Niven [EMAIL PROTECTED] wrote:
Hello folks,
There is a very nice thumbnail gallery in the More Eric Meyer on CSS book,
which I have temporarily posted here for easy reference:
http://stinkyrat.com/proj02/ch0207.html
My question: Is there any way to align the thumbnails along one baseline? I
think it's a great layout aside from the horizontal alignment, and I know of
no solution to fix thisurgh!
This is the relevant CSS:
div.pic {float: left; height: 130px; width: 130px;
padding: 15px; margin: 5px 3px;}
div.pic img {border: 1px solid; border-color: #444 #AAA #AAA #444;}
div.ls img {height: 96px; width: 128px; margin: 16px 0;}
div.pt img {height: 128px; width: 96px; margin: 0 16px;}
div.pic ul {display: none;}
redistribute the margins thus:
div.ls img {height: 96px; width: 128px; margin: 32px 0 0 0;}
div.pt img {height: 128px; width: 96px; margin: 0 16px;}
--
Richard Grevers
New Plymouth, New Zealand
Orphan Gmail invites free to good homes.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] tabtastic anchor page offset
hello everyone im sure most of us here have seen tabtastic http://phrogz.net/JS/Tabtastic/index.html . i am very impressed by the simplicity of the library, however whenever you click on a tab, the anchor's position is changed and in cases where you have a long tab-content, the page scrolls breaking the illusion of a tab pane. i was wondering if there is anybody here who have tried to solve this usability problem or has a bit of idea how. my idea is to disable the page offset when a #fragment is clicked. anyone? thanks -- www.markrenn.com http://www.markrenn.com +639193189384 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: Subject: RE: [css-d] a:hover border-bottom not showing up in IE?
Jason, is there a special reason why you didn't even tried the
suggestion in my post?
-
Filter only apply to elements which have layout, and any dimension
will let your link gain this quality
/* \*/
* html #nav a {height:1%}
/* */
border and filter are back, but you'll probably have to adjust the
positioning.
Ingo
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] horizontal border in a liquid layout
Okay, it works now, thanks very much for your help. But I don't quite
understand why it works the way it does and I would really appreciate if you
have the time to explain it to me. The whitebg div seems to push the navbar
across to the right, but it doesn't seem to push it over 160 pixels (the
width of the whitebg div).
In the file http://www.biotext.com.au/test0205/columns27.html I set the
whitebg div to a width of 160 pixels but it looks as if there is about 30
pixels space to the left. In the file
http://www.biotext.com.au/test0205/columns29.html I set the width of whitebg
to 220 pixels and there is more but it's not 220 pixels.
Don't know what happened to my doctype, I'm sure I had a proper one in there
at one stage. I've put in the 4.01 transitional - loose dtd, as I am handing
this over to the client for maintenance in an old version of Dreamweaver,
and I'm dubious about the html that will be inserted as content. However I
also tried this with xhtml at
http://www.biotext.com.au/test0205/columns30.html and the space to the left
still doesn't look like 160 pixels.
Thanks,
Maren
Think you've got it the wrong way around. The green border should start
at the logo, and stretch to the left. The rest is just adjustments to
make it look right.
The following is based on this page:
http://www.biotext.com.au/test0205/columns_25.html
#topnavbar {position: absolute;
top: 177px;
right: 130px;
height: 48px;
background-image: url(bar4.gif);
background-repeat: repeat-x;
background-position: right bottom;
width: 100%;
z-index: 1;
}
#whitebg { float: left;
width: 160px;
height: 48px;
background-color: #fff;
}
...and a proper doctype that the browsers will honor. I used:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
Safari, Firefox, Opera, IE6 and IE/Mac seems to be happy with it -
regardless of page-width above 600px.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Mac/ie5.2-Saf::Win/ie5x
On Tue, 28 Jun 2005 23:58:40 -0400, Philippe Wittenbergh [EMAIL PROTECTED] wrote: On 29 Jun 2005, at 10:57 am, David Laakso wrote: re: Mac/ie5.2. Safari. Win/ie5x. ... http://www.dlaakso.com/sandbox/css.html (min-max 600-1000 :: 200% zoom :: div:hover) [...] Before receiving your on-list reply, I felt that Mac/IE5.2 was a lost cause, and certainly not worth your time and effort; consequently, I hid the style sheet from that browser, deleted Vivaldi(unreadable on my end) and Zapino(for the sake of Safari) from the first letter font-family, and corrected (I think) some of the other problems you mentioned. Thanks. Best, David Laakso -- http://www.dlaakso.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
