Re: [css-d] trouble with extra width in IE PC
Bruce Gilbert wrote:
Hello,
I still haven't been able to come up with a solution to my problem
with my div's not lining up in IE (PC). The URL in question is
http://www.inspired-evolution.com/Contact.php, and the CSS is
http://www.inspired-evolution.com/Gilbert.css.
I tried adding display:inline to the divs that make up the page, but
that messes things up in the good browsers. Any suggestions for me?
This isn't a float issue, because I have nothing floated.
Not tested.
Look at this;
#breadcrumbs{/*sets positioning and font-size for breadcrumbs*/
padding-left:4em; --- 4 ems added to
padding-top:.5em;
padding-bottom:.5em;
width:100%;--- 100% width
font-size:.95em;
font-weight:bold;
color:#ccc;
font-family:verdana, arial, sans-serif;
}
The 100% + 4em causes #breadcrumbs's parent container to expand to enclose it.
IE's like that, helpful. :( There is not need for a width value anyway, so lose
it. That should solve your problem unless there are other similar instances.
Usually, there is no need to state width. A block element defaults to available
width, while inline elements should ignore the property.
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] Problems with layout in Firefox
So, I tried many things to come to a solution, but it seems it won't
work. I don't have padding or width declarations for the #content id,
yet it's not showing as it should in IE.
I need some more advice, if someone could give it.
Thanks in advance!
On 6/26/05, Radu Adam [EMAIL PROTECTED] wrote:
Thank you very much for advice. This is just a sketch of what it will
be... I'll change colors for visited links and font sizes (I think
I'll use ems) ... my problem is positioning in IE. I dont' know what
the problem is right now ... that's why I asked here.
On 6/26/05, Felix Miata [EMAIL PROTECTED] wrote:
Radu Adam wrote:
Thanks for the advice and tips. Can you take a new look at it? It
looks much better now... only that IE doesn't show it as it should.
Some more help needed, please.
Looking only in FF 1.0.4, I don't see too many problems. Mostly it's
nice.
1: a.com {
font-size: 11px;
font-weight: normal;
text-decoration: none;
color: #B30E0B;
}
a:hover.com {
font-size: 11px;
font-weight: normal;
text-decoration: underline;
color: #B30E0B;
}
can be condensed to:
a.com {
font-size: 11px;
font-weight: normal;
text-decoration: none;
color: #B30E0B;
}
a:hover.com {
text-decoration: underline;
}
A bigger problem is that your link colors above do not distinguish
between visited and unvisited links. That's bad:
http://www.useit.com/alertbox/20040503.html
2: body {font-size: 70%;} makes no distinction based upon the visitor's
browser setting. He could have set his to 12px because he has good eyes
and a large display, or to 28px because he has weak eyes but a typical
display, or left it alone because he found the shipped default perfectly
suitable. Yet in spite of any of these desires or needs, you've decided
he is wrong, and imposed text 49% the actual size of what he wants or
needs: http://members.ij.net/mrmazda/auth/area70.html A typical IE user
may necessarily have already set his to larger or largest, in which case
he cannot make it big enough to overcome your 70% rule. BTW, your 11px
a.com link styles above to a user with 20px or more default will be
functionally invisible in the absence of zoom capability.
3: A fixed width that requires 1024x768 resolution and a maximized
browser to avoid horizontal scroll will make many unhappy. With
1024x768, IE maximized cannot be made wide enough to have no scroll.
4: Don't ask for an opinion about a page without supplying its complete
location. Many email programs do not make clickable links in the absence
of a stanadard URL prefix like https:// or ftp://. If you want help,
don't make helping hard to do: http://www.dinamo-online.net/beta/
--
Love does not demand its own way.1 Corinthians 13:5
Team OS/2 ** Reg. Linux User #211409
Felix Miata *** http://members.ij.net/mrmazda/auth/
__
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] CSS + iFrames + Javascript + IE6 = problems!
Hello, I am experiencing a very frustrating problem with my new website that I need some help with. I've posted what I have so far at http://www.twnty1.com/MBP4/ The site seems to work fine in all of the Mac OS browsers, at least in Safari, IE Mac, and Firefox, and the css and xhtml both validate. When I look at the site on my friends' PCs, running IE6 (and possibly other browsers as well, I'm not sure) it looks all wrong. There are three iframes on the site, the leftmost one for news/folio/info, the center one for the images, and the rightmost one for the image specific information. In IE6 the left and right frames are misaligned, appearing offset about 100(?) pixels or so to the right, and layered in front of the rest of the site. Since I don't have a PC, I've had no real means of testing in an attempt to determine what the problem is. For the past couple of weeks I've been trying everything I can think of while I'm at home, then seeing if there's any difference at my friends' places. I haven't had much luck so far though, so any help would be much appreciated. Thanks in advance for any advice you might have, -matt booth __ 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] Problems with layout in Firefox
Radu Adam schrieb: So, I tried many things to come to a solution, but it seems it won't work. I don't have padding or width declarations for the #content id, yet it's not showing as it should in IE. I need some more advice, if someone could give it. Thanks in advance! Do you still refer to this link? http://www.dinamo-online.net/beta/ and I think the problem you are referring to is that the box in the middle is placed vertically under the box at the left? You should try to give an adequate problem description. Currently, there is a float drop http://nemesis1.f2o.org/aarchive?id=11#threepixelgap because of the three pixel jog http://www.positioniseverything.net/explorer/threepxtest.html 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] IE white-space: normal
Rob Agar schrieb: is it a known bug for white-space: normal not to work in IE6? ... Anyone know of a workaround? for IE5.5: http://www.xs4all.nl/~blackeye/ie55bug.html If your googling didn't show a workaround, you should provide a URL to a _minimal_ testcase. 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] Z-index on a popup menu
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 http://www.stroke7.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] Floats not doing what intended in IE, Firefox, etc
Hi, I got some more content from my client for the photography website I've been working on for what seems like centuries now - I've designed two whole sites in between. The problem I'm having is still with floats on the following pages: http://www.vandevelde.co.uk/wedding_prices.html http://www.vandevelde.co.uk/main_1.css In IE everything after the first two floats moves to a position below the left/right columns (ie, everything below Package 1 and Package 2). In Firefox and Safari, everything below the second set of floats moves to a position below the left/right columns (ie, Additional Costs appears below the two side cols). I've tried everything I can think of, and am now so much in a muddle I don't know where to start! :( Another page http://www.vandevelde.co.uk/portraiture.html is also causing problems in PC IE, but works in Safari, Firefox and Mac IE. One other 'smallish' issue: I get a thin, blue, vertical line in Firefox when moving the mouse over the navigation links. The line doesn't go away after I've moved the mouse off the link. Anyone got any ideas? Thanks for any help. I'm really looking forward to getting this one off the books - especially as the client is a good friend and they want to start directing people to their new website. Cheers, and thanks Tracy __ 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] Floats not doing what intended in IE, Firefox, etc
T Shorrock wrote:
http://www.vandevelde.co.uk/wedding_prices.html
http://www.vandevelde.co.uk/main_1.css
In IE everything after the first two floats moves to a position below
the left/right columns (ie, everything below Package 1 and Package
2).
In Firefox and Safari, everything below the second set of floats
moves to a position below the left/right columns (ie, Additional
Costs appears below the two side cols).
Firefox, Safari, Opera IE6 seems to render flawless when given these
additions:
CSS:
#maincontent {display: table; width: 400px; margin: 0; _height: 0;}
#navcontainer {margin-left: -1em;}
In addition, IE6 needs to be put into quirks mode...
HTML:
?xml version=1.0 encoding=utf-8?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
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-d] ie monster mash
I've taken a concept by Georg Sortun and turned it into a monster. http://www.dlaakso.com/sandbox/test-1.html Grateful for any assistance... 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/
[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), so I'll just give it another try: can somebody, pretty-please, have a look at this problem: I've got a problem with a table that has been stretched out to 100% height. In FF it works fine, but in IE it is messed up (big surprise!). The table consists of two rows, the height of the main-table is 100% and the height of top-row is 152px, the height of other row (the content-area) must be the height of the rest of the screen. So I used 100% to do that. IE makes the content-area as high as the viewport (browser-screen) with the result that the 'disclaimer'-link can only be found after using the scroll -bar. Another side-affect is that on pages with a lot of content, the disclaimer-link isn't positioned on the bottom of the page, but on the position where the content-area is as tall as the height of the viewport. My files are at: http://www.sebastian.nl/vivium/empty.htm http://www.sebastian.nl/vivium/full.htm I hope someone can help, we've recently decided that we're going to build with the XHTML1.0 transitional standards and I can't find a solution for this problem. Cheers, -- Niek Emmen, Sitebouwer Sebastian Webprojecten Poststraat 68 5038 DH Tilburg t 013 518 61 20 f 013 518 61 21 i www.sebastian.nl __ 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
Niek, The table consists of two rows, the height of the main-table is 100% and the height of top-row is 152px, the height of other row (the content-area) must be the height of the rest of the screen. So I used 100% to do that. 100% + 152px 100% You gave the table a height of 100% the second row shall be as high as the parent (100%). The first row has a height of 152px, so that the contents of the table will be larger than the table itself. IE expands the table to a full height of viewport + 152px. IE computes the 100% of #submenu relative to the next parent element with an explicit height, which is the outer table. Firefox uses the height of the parent element, which results in the effect that you desired. Get rid of all unnecessary layout tables! If you still want to use a layout table at all, give it min-height: 100% (for Firefox Co) and height 100% only for IE. You don't need to assign a height to the second row of the layout table, because it will use the available space anyway. regards, Martin __ 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] positioned element glich
Hello everyone, I am finalizing this layout before I finish my final days at this current job and I cant seem to find out why I have a gap under my nav bar image. Can anyone Take a look please? http://www.rocklinsystems.com/infinity/layout.htm CSS- http://www.rocklinsystems.com/infinity/styles/infinitystyles.css 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] Another try: Tables and 100% height
On Mon, 27 Jun 2005 16:11:41 +0200, you wrote: 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. johnSteve __ 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] clear:float is causing layout problem
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 Any help would be much appreciated. Thanks, Matt __ 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 lists]
Hey thanks David! I can see that there shouldnt be two id's in one document, however when i change the ID's so that they are different, i still get one sublist on the actual site. It keeps using the 2nd sublist that is entered in the code. here is the site: http://tct2005.com/wp here is the code: div id=navcontainer ul id=navlist li id=activea href=http://tct2005.com/wp/?cat=2;News/a ul id=subnavlist1 li id=subactive1a href=index.php?cat=4 id=subcurrent1Cases/a/li lia href=index.php?cat=5Articles/a/li lia href=index.php?cat=3Lectures/a/li lia href=#Dailies/a/li /ul /li li id=activea href=index.php?page_id=10Education/a ul id=subnavlist2 li id=subactive2a href=index.php?cat=4 id=subcurrent2Learning/a/li lia href=index.php?cat=5people/a/li lia href=index.php?cat=3stuff/a/li lia href=#more/a/li /ul /li lia href=index.php?page_id=11Register/a /li lia href=index.php?page_id=6Contact/a/li /ul /div David Dorward wrote: On 6/24/05, jeremy [EMAIL PROTECTED] wrote: It works great like this, but it is not completed. I want to add a whole sublist to Item Two. seems like it would be easy - just copy the sublist from Item One and paste into the li of Item Two. right? http://tct2005.com/wp/ http://validator.w3.org/check?verbose=1uri=http%3A//tct2005.com/wp/ You can't use the same id twice in a document. __ 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] Now its only in IE (whats new) white line
Right above the top nav I have a white line which only shows up in IE. Any suggestions? http://www.rocklinsystems.com/infinity/layout.htm CSS- http://www.rocklinsystems.com/infinity/styles/infinitystyles.css Thanks in advance. 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] Problems with layout in Firefox
Do you still refer to this link?
http://www.dinamo-online.net/beta/
Yes I refer to this link!
and I think the problem you are referring to is that the box in the
middle is placed vertically under the box at the left? You should try to
give an adequate problem description.
Currently, there is a float drop
http://nemesis1.f2o.org/aarchive?id=11#threepixelgap
because of the three pixel jog
http://www.positioniseverything.net/explorer/threepxtest.html
Ingo
OK I got that ... I tried to solve it. You cand look now at the
link... Now the box does float by the left sidebar, but not as it
should (as I want).
This is what I did:
#container {
width: 100%;
float: left;
margin-right: -300px;
}
#content {
margin-right: 310px;
}
#main {
margin-left: 210px;
}
#left {
width: 200px;
float: left;
}
/* hide from MacIE \*/
* html #left {
margin-left: -3px;
}
* html #content {
margin-right: 0px;
}
/* end hide */
Am I doing it right?
__
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] Problems with layout in Firefox
Radu Adam schrieb:
http://www.dinamo-online.net/beta/
... Now the box does float by the left sidebar, but not as it should (as I
want).
This is what I did: ...
I think you could insert this
/* hide from MacIE \*/
* html #main { margin-left: 207px; height:1%; }
/* */
instead of
/* hide from MacIE \*/
* html #left {
margin-left: -3px;
}
* html #content {
margin-right: 0px;
}
/* end hide */
height:any value let #main gain layout, acting more like a rectangular
entity.
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] Problems with layout in Firefox
It looks better now, even if the space between left and the middle
column is not the same as the space between the right column and the
middle one. But this doesn't bother me so much.. I'll teach my users
to use Firefox this way.
Thank you very much.
On 6/27/05, Ingo Chao [EMAIL PROTECTED] wrote:
Radu Adam schrieb:
http://www.dinamo-online.net/beta/
... Now the box does float by the left sidebar, but not as it should (as I
want).
This is what I did: ...
I think you could insert this
/* hide from MacIE \*/
* html #main { margin-left: 207px; height:1%; }
/* */
instead of
/* hide from MacIE \*/
* html #left {
margin-left: -3px;
}
* html #content {
margin-right: 0px;
}
/* end hide */
height:any value let #main gain layout, acting more like a rectangular
entity.
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] Absolute positioning containers
I have a page that is generating an order confirmation that is broken down into a whole bunch of small tables. I have redone pretty much everything with css, but I am leaving the tables for now because the html table code is generated on the fly by PHP script that I inherited with the code-base. On one of the pages I was able to use absolute positioning to position the tables absolutely with respect to the form element that contained them. For that application it worked beautifully. However, on the next page which has the same table but without the form or input elements (we go from an order page to an order confirmation page, where it re-lists everything you just typed in), the absolute positioning renders with respect to the page instead of the containing div. My favorite reference, Core CSS 2nd Ed. by Schengili-Roberts, claims that absolute positioning renders with respect to the page always. This is obviously not true (at least anymore). I am testing with Firefox 1.0.4 and IE6, which display the same behavior in this regard. Does anyone know the details of container elements for absolute positioning: what will and will not render abs contained elements properly? Any help is greatly 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/
[css-d] CSS menu link
I found the link, if anyone is interested: http://www.tjkdesign.com/articles/dropdown/3.asp -- Forwarded by Robert Hanson/mva on 06/27/2005 08:43 PM --- From: Robert Hanson on 06/26/2005 02:00 PM To:css-d@lists.css-discuss.org cc: Subject:CSS menu link Someone posted a link to a webpage with a horizontal menu with a second level horizontal menu below it; the menu had a feature that allowed tabbing from one menu item to another. I can't find that link; could soneone post it again please? __ 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 lists
Yes thank you! I had already validated, and i did get that error. So here is what i did to that: li id=active1a li id=active2a I changed the IDs so that there were no duplicates, and i still cannot seem to get this to work. What happens is that it still uses one of the nested lists., and not both. does that make sense? Some of my thoughts have been that this isnt meant to do that. I am not sure,... but when i saw the source on - http://css.maxdesign.com.au/listamatic2/horizontal02.htm I was thinking that it would allow you to have nested lists on all of the buttons. hmm David Dorward wrote: On 6/27/05, jeremy [EMAIL PROTECTED] wrote: I can see that there shouldnt be two id's in one document li id=activea li id=activea http://validator.w3.org/ __ 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] Float help
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 -- 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/
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 -- Dwain Alford [EMAIL PROTECTED] http://www.alforddesigngroup.com The artist may use any form which his expression demands; for his inner impulse must find suitable expression. Wassily Kandinsky, Concerning The Spiritual In Art __ 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] div height problems in Firefox 1.0.4
Good day and I have a little div height rendering problem with Firefox 1.0.4 ( viewing from a WinXP Pro machine ). 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. This is my first attempt at using an all css layout and I have been trying to find out why this is happening in Firefox however IE 6.0 renders everything just fine. At first I thought it actually might be the doctype and tried using different doctypes and quirks mode which had no effect. I am not using floats so I know it is not a matter of my having to clear the div etc. Any help would be appreciated if possible. All code is on the page and I would have copied/pasted it at the bottom of this email however that would have made for a long email which I believe is a bit frowned upon by list admins. I hope someone can help guide me to what I might be doing wrong. Thank you for any help or suggestions, Michael Goddard deafninja at gmail dot 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] 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. erland __ 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] Date: Mon, 27 Jun 2005 15:23:35 -0400 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. Hi George, 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. The border and padding of the containing div do not expand the div but take up part of the 472px total. So, even though the content adds to 472px as well, it really has only 466px-worth of space to display in, which is not enough (472px/container-width - 1px/left-border - 2px/left-padding - 2px/right-padding - 1px/right-border = 466px). 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. 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] IE problem with list links
I am pretty sure 75% of designers have run into this (I have yet to until now). In IE, my right side nav is all messed up. Its fine in FF. Its supposed to be all white and obviously is not. ANy help is appreciated. Page - http://www.rocklinsystems.com/infinity/layout_internal.htm CSS - http://www.rocklinsystems.com/infinity/styles/infinitystyles.css 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-d] I'm joky
Hello everybody, i'm joky a french webmaster, i'm coding CSS since last year and i found this mailling list so i suscribbed. Sorry for my poor english and my errors, i'll try to do my best, to help you if i can and to explain my probleme the best i can when i'll have to do... thx all... __ 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] Still problems with Faux columns
I've been able to solve several problems on my own since my previous post, but the faux columns this is driving me nuts. http://www.webdesignpartners.com/perfect_gift/index.html If you view this page in IE, it looks exactly the way I want it to (except for the colors, which were not my decision). 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. Can anyone tell me how I can get the faux columns thing working without using the border? Any help will be greatly appreciated. Phil __ 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] 2 col float in IE 6 is not floating.
external style sheet: http://proto.kudos.goldenware.com/i/t.css page: http://proto.kudos.goldenware.com/a/AB_Airlines.html This was working fine earlier. But now it seems that in IE 6 that left colum gets pushed down as far as the right colum stretches. Not sure if its a margin problem or not. Im also using the faux colum technique becuase sometimes the right column stretches further than the left column and vice versa. Any suggestions would be awesome. Thanks! ~shawn a __ 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] space between paragraphs
The space between paragraphs is much bigger on a PC than a Mac. Is there some way to control the space and make it more consistent? Thanks, Eliana - Eliana Berlfein Sidewalk Cafe Design The Art and Soul of Web Design 1920 13th Street, Suite C Boulder, Colorado, 80302 720.565.0126 [EMAIL PROTECTED] http://www.sidewalkcafedesign.com http://www.mochaforartists.com - Websites for artists __ 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] out of place but floating?
I'm trying to figure out if it's at all possible to accomplish something, so I figured I'd bounce it out there for general consumption. I'd like to be able to put footnotes in-stream but have them show up at the end of a stream. For example (bogus pseudo-code, doesn't actually work, for illustrated purposes only, do not try this at home): div class=section Some text. div class=footfootnote/div More text. /div Should show up like: Some text. More text. footnote I can't figure out a way to do this without using absolute positioning, which takes this out of the realm of structured markup. The actual goal is to be able to write a single structured document which shows up on screen with footnotes at the end of their containing section, and if I'm really lucky, in print with footnotes at the end of the page on which their normal flow tag would appear. Anyone have any thoughts on if this is even possible, or should I go crawling back to LaTeX? -faisal __ 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 to me using Firefox 1.0.4 on my Linux PC. Are you perhaps using PC to mean the combination of Windows and Internet Explorer? Can't check that for you. -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] space between paragraphs
On Mon, Jun 27, 2005 at 05:46:17PM -0600, Eliana Berlfein wrote:
The space between paragraphs is much bigger on a PC than a Mac. Is
there some way to control the space and make it more consistent?
You could do
p {
margin-bottom: [some length];
padding-bottom: [some other length];
margin-top: [still another length];
padding-top: [a fourth length];
}
Let us know if that works for you.
--
Stephen R. Laniel
[EMAIL PROTECTED]
+(617) 308-5571
http://laniels.org/
PGP key: http://laniels.org/slaniel.key
signature.asc
Description: Digital signature
__
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] space between paragraphs
From: Eliana Berlfein The space between paragraphs is much bigger on a PC than a Mac. Is there some way to control the space and make it more consistent? Set the top and bottom margins and padding to values that work nicely for your intended use and preferences. Different browsers may use different default values when these settings aren't specifically declared. You may want to remove all top spacing and use only bottom spacing, or vice versa, or even some mix of both. Headings will likely need matching treatment. The use of em or % values can be good for this sort of adjustment as the spacing will scale with text size changes that a user may make. -- 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] out of place but floating?
On 6/27/2005 5:46 PM Faisal N. Jawdat wrote: I'd like to be able to put footnotes in-stream but have them show up at the end of a stream. snip The actual goal is to be able to write a single structured document which shows up on screen with footnotes at the end of their containing section, and if I'm really lucky, in print with footnotes at the end of the page on which their normal flow tag would appear. Anyone have any thoughts on if this is even possible, or should I go crawling back to LaTeX? Sounds like a job for the DOM and Javascript, not CSS. -- Steve Clason Web Design and Development Boulder, Colorado, USA www.topdogstrategy.com (303)818-8590 __ 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] space between paragraphs
Eliana Berlfein wrote:
The space between paragraphs is much bigger on a PC than a Mac. Is
there some way to control the space and make it more consistent?
This is something set by the user agent. In Firefox the rule is thus:
p {margin: 1em 0;} (res/html.css)
The rule for Konqueror (KHTML) in Linux is similar
(khtml/css/html4.css), and should be the same as Safari. Explicitly
setting the margin for p in your stylesheet should match them pretty
well as long as both Mac PC are using the exact same fonts and your
doctype keeps the browsers in standards mode.
--
Love does not demand its own way.1 Corinthians 13:5
Team OS/2 ** Reg. Linux User #211409
Felix Miata *** http://members.ij.net/mrmazda/auth/
__
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] an absolutely positioned a to 100% of parent
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. *the HTML* http://enure.net/photos/drive-east-seattle-to-chicago/ *the CSS* http://enure.net/photos/enure-photos.css Thanks for any help. I'll be publishing the photo gallery (PHP/CSS/ XHTML) once I finish this... Email me off list if you're interested. 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] padding and cell sizes
From: Eliana Berlfein [EMAIL PROTECTED]
I made a website that uses tables and css. I made the site on a Mac,
and it looks perfect. But on a PC the table cells are not the right
size.
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.
I'm assuming you're speaking of IE/Win browsers on a PC, since Gecko and Opera
are fine. Try removing the padding from the following selector -
table {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
color: #62194b;
line-height: 20px;
padding-left: 20px; /* remove this */
}
I'm not sure what that padding is there for, but removing it seems to even
things out between the PC browsers I tried. If it's needed for another browser
, you can just remove it for the IE/Wins by using the following selector/hack
combination -
/* \*/
* html table {padding-left: 0;}
/* */
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] IE white-space: normal
Sorry I forgot to mention an important detail - this problem only appears in IE6 quirks mode. I'm working on an old and fairly sprawling site (.asp, table layout, inline font tags, the whole horrorshow =), so I'm stuck with it. Ingo Chao wrote: for IE5.5: http://www.xs4all.nl/~blackeye/ie55bug.html that's *almost* the same problem, but IE6 doesn't appear to have this exact same bug. Pretty darn similar though... 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 http://www.wildlime.com/rob/list_css_line_wrapping.css 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/
[css-d] Table layout using floats
Hello all,
I am trying to make a fluid table-like layout without having to resort
to tables. I have a series of floated DIVs that act as the cells of the
grid, and each has a variable height. The following code will
illustrate the problem I'm having. For some reason that defies both
logic and convention, it works as desired in IE but not in FF. I
haven't been able to test it in any other browsers.
style type=text/css
div.floater {
width: 33%;
float: left;
background-color: blue;
border: 1px solid lime;
}
div.rowbreak { clear: both; }
div#div1 { height: 100px; }
div#div2 { height: 200px; }
div#div3 { height: 150px; }
div#div4 { height: 200px; }
div#div5 { height: 100px; }
div#div6 { height: 150px; }
/style
div id=div1 class=floater/div
div id=div2 class=floater/div
div id=div3 class=floater/div
div class=rowbreak/div
div id=div4 class=floater/div
div id=div5 class=floater/div
div id=div6 class=floater/div
The problem exhibited in Firefox is that the first div of the second row
('div4') becomes 'stuck' under the last div in the first row ('div3') if
div3 is not the tallest cell in the row. I was under the impression
that having the 'rowbreak' div with clear: both in there would break
the rows properly.
Is there a way to fix this problem without having a wrapper div with a
static height around each row?
--
Justin.
__
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] space between paragraphs
Stephen R Laniel wrote:
On Mon, Jun 27, 2005 at 08:41:03PM -0400, Felix Miata wrote:
The space between paragraphs is much bigger on a PC than a Mac. Is
there some way to control the space and make it more consistent?
This is something set by the user agent. In Firefox the rule is thus:
p {margin: 1em 0;} (res/html.css)
Wait, doesn't the page's author's CSS override the browser's CSS?
Only when the author actually does it. He doesn't have to.
--
Love does not demand its own way.1 Corinthians 13:5
Team OS/2 ** Reg. Linux User #211409
Felix Miata *** http://members.ij.net/mrmazda/auth/
__
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] space between paragraphs
On Mon, Jun 27, 2005 at 10:04:04PM -0400, Felix Miata wrote: Wait, doesn't the page's author's CSS override the browser's CSS? Only when the author actually does it. He doesn't have to. But if the original poster was trying to figure out how to make her pages look good in multiple browsers, the correct answer is to change the page's CSS. -- Stephen R. Laniel [EMAIL PROTECTED] +(617) 308-5571 http://laniels.org/ PGP key: http://laniels.org/slaniel.key signature.asc Description: Digital signature __ 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] a:hover border-bottom not showing up in IE?
i have a few problems with a personal page that renders okay in firefox
but not so well in IE 6. my first problem is as follows: i want my links
to look like boxes with a black solid border on all sides and when the
user hovers over a link i want the border style to change to dashed. the
following example works fine in firefox but in IE the bottom border
doesnt change to dashed style.
an interesting aside, if i remove the following from div#nav a and put
it into div#nav i will also lose the TOP border in IE:
font-family: helvetica, sans-serif;
font-size: 14px;
z-index: 3;
website: http://www.onejasonforsale.com/
stylesheet: http://www.onejasonforsale.com/stylesheet.css
example html:
div id=nav
a href=front.htmlhome/a
/div
most relevant css:
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;
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
{
border-style: dashed;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
__
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(s) check
06/27/2005 Hi All: A couple of site checks, please. First is, http://www.fatpawdesign.com/ http://www.fatpawdesign.com/fatpawdesigncss.css Second is, http://www.fatpawdesign.com/lefnp/LEFNPrenovationhtml.html http://www.fatpawdesign.com/lefnp/LEFNPrenovationcss.css Both: XHTML validates 1.0 strict, CSS validates WARNING: THE LEFNP PAGES CONTAIN MULTIPLE IMAGES AND ARE 500K IN SIZE. Thanks in advance. Cheers, Peter __ 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] a:hover border-bottom not showing up in IE?
From: Jason Baker
...in IE the bottom border doesnt change to dashed style.
Have you turned off the default underlining ofr links in the div?
#nav a {text-decoration:none;}
--
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] an absolutely positioned a to 100% of parent
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 -- 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] Absolute positioning woes
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. 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/
