[css-d] IE 6 layout issues

[David Bailey]

Hi,

I've got a couple of problems with IE 6 (and probably other versions,  
I don't have other IE browsers in order to check) which all work fine  
in Safari and FF. I've struggled with this for a few hours now, and  
looked for answers, but to no avail.

http://www.widemannviolins.com/index.php


1. Text content:
The text drops down below the image on the right instead of being  
parallel to it. I'm sure I've seen something about this problem  
before in one of my books, but I can't find it for the life of me.

2. Stripes:
The gray stripes under the navigation bar at the top and the bottom  
redish band at the bottom drops too low (the bottom one gets tangled  
with the footer text.

3. The Main Nav bar text:
I have used WebAssist's CSS MenuWriter for this (I thought it would  
save time!). I am having trouble getting this to work well.  
Apparently IE requires width and height to be declared rather than  
auto. Is there any way to get this looking like it does in Safari and  
FF?
It's got it's own its own stylesheet: http://www.widemannviolins.com/ 
CSSMenuWriter/cssmw/menu_ie.css

The main style sheet is: http://www.widemannviolins.com/styles/ 
layout.css


Any help is much appreciated,
David
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE 8

[Reese]

Kathy Wheeler wrote:

> Ummm ... scratches head ... what do you mean by "does not support" ?  
> IE6 standalone on my test win box loads pngs fine ( well ... as fine  
> as ie6 is supposed to anyway - no png transparency :-(  ). I use them  
> (pngs) as background images for css elements, inline as normal  
> images ... and ie6 displays them all. Do you perhaps mean the various  
> png transparency hacks??? I'm still having trouble finding one of  
> those that works for png transparency with CSS background images.

Yes, my apologies for my haste earlier. The point was, Multi-IE6 is
not the same as IE6.

Reese
--
http://www.inkworkswell.com


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centered text positioned incorrectly in IE7

[Gunlaug Sørtun]

Chris Hanks wrote:

> Alright, I took care of the markup problems, so everything validates.
>  It's been put up in its updated form:
> 
> http://www.selfsoothingsoftware.com

Good. Makes it much easier to work with.

> I was trying to keep the main text column at a consistent width, and 
> deal with an expanding/shrinking window size by moving the 
> supplemental boxes in and out of the main column. Is there a way to 
> do that?

Yes. See below.

> I'm also not sure how you meant I should move the right and left 
> boxes into the padding on either side.

I meant: with negative margins on those floats.

> I tried setting their positions to "relative" and then displacing 
> them with "left:" and "right:", but that just leaves big holes where
>  they used to be.

Relative positioning doesn't move elements, only offset them visually.
This means they still take up space in their original position, which
creates those gaps you observed.

To give you some ideas about how you can mix your various wishes
together in a mostly cross-browser reliable way, check the following
slightly reworked copy of your page...


...and its stylesheet...


It can be made to work much better than that, but the 'em'-sizing you're
using creates problems. To make it work properly you'll have to restyle
the layout so the 'em'-sizing is set on body or a page-wrapper, and
containers further in get sized in percentages of that outer element.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE 8

[Kathy Wheeler]

On 06/05/2009, at 12:42 AM, Reese wrote:

> Kathy Wheeler wrote:
>> I have asked for documented proofs of this before and so far have
>> received none! Not even sample URL's. I would appreciate more details
>> on those "20 instances".
>
> Here's one:
> Standalone IE6 does not support .png images.
> Multi-IE6 on XP with IE7 installed, does.


Ummm ... scratches head ... what do you mean by "does not support" ?  
IE6 standalone on my test win box loads pngs fine ( well ... as fine  
as ie6 is supposed to anyway - no png transparency :-(  ). I use them  
(pngs) as background images for css elements, inline as normal  
images ... and ie6 displays them all. Do you perhaps mean the various  
png transparency hacks??? I'm still having trouble finding one of  
those that works for png transparency with CSS background images.

Regards,
KathyW.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centered text positioned incorrectly in IE7

[Chris Hanks]

>
> For cross-browser appearance in all somewhat standard-aware browsers -
> including IE6/7 in Strict mode, the following approach will work.
>
> - Add left and right padding on #elastic-container, and modify its
> min/max-width to include these side-paddings.
>
> - Pull those .left and .right boxes into #elastic-container's
> side-paddings, so they appear where they are now.
>
> - Remove side-margins and max-width from .tutorial p, so those
> paragraphs are held in place by the side-paddings on #elastic-container
> and the inner side-margins on those .left and .right boxes.
>
>
>
>
> In addition: you should mark up in accordance with the chosen doctype,
> or else you'll have a hard time making sense of what the markup
> validator tells you...
> 
> Some of those errors are more serious, while others are caused by
> doctype vs. markup confusion.
> In short: your document is "invalid tag soup" ATM, and should be fixed
> at markup level before you start correcting it at CSS/appearance level.
>
> regards
>Georg
> --
> http://www.gunlaug.no
>


Hello -

Alright, I took care of the markup problems, so everything validates. It's
been put up in its updated form:

http://www.selfsoothingsoftware.com

I also set up the CSS like you suggested - the thing I don't like about the
padding is that when the browser window is small, the text column shrinks to
be so narrow that it's awkward to read, with a lot of whitespace to either
side. I was trying to keep the main text column at a consistent width, and
deal with an expanding/shrinking window size by moving the supplemental
boxes in and out of the main column. Is there a way to do that?

I'm also not sure how you meant I should move the right and left boxes into
the padding on either side. I tried setting their positions to "relative"
and then displacing them with "left:" and "right:", but that just leaves big
holes where they used to be.

Thanks again!
Chris
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centered text positioned incorrectly in IE7

[Gunlaug Sørtun]

Chris Hanks wrote:
> Hmm, alright. Can you or anyone else on the list suggest a better way
> of making this work? I'm not sure where to begin...

For cross-browser appearance in all somewhat standard-aware browsers -
including IE6/7 in Strict mode, the following approach will work.

- Add left and right padding on #elastic-container, and modify its
min/max-width to include these side-paddings.

- Pull those .left and .right boxes into #elastic-container's
side-paddings, so they appear where they are now.

- Remove side-margins and max-width from .tutorial p, so those
paragraphs are held in place by the side-paddings on #elastic-container
and the inner side-margins on those .left and .right boxes.




In addition: you should mark up in accordance with the chosen doctype,
or else you'll have a hard time making sense of what the markup
validator tells you...

Some of those errors are more serious, while others are caused by
doctype vs. markup confusion.
In short: your document is "invalid tag soup" ATM, and should be fixed
at markup level before you start correcting it at CSS/appearance level.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] ie/6.0 image positioning

[Alan Gresley]

David Laakso wrote:
> re: 
> Unable to position thumbnail in left column flush right to an imaginary 
> right side drop-line from the navigation links above it.
> Relevant selectors at very top of style sheet:
> 
> * html #f img { ... }
> * html body#k9 #f img { ... }
> Thanks.
> ~d


Hello David.

That is a very hacky style sheet. :-)


Replace this style

* html #f img{ float: none;  position:relative; top: 0; left: 50px; }


with this

* html #f img{ position:relative;right:-31%; }


and the image will be flush.



-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE6 & 7

[Christopher Kip]

Hi All,

Having some difficulties with a layout.  In Safari, Firefox and  
Chrome all seems fine.  But in IE pretty much a disaster.  Issues:  
row spacing is twice what it should be, backgrounds in products  
containers not extending the whole height of the container and the  
same with the black background behind the boxes.  I tried setting  
overflow: hidden on the box elements rather than using the clearfloat  
hack but that seemed to make even more problems.

http://chromacreative.com/testingserver/hawkeye/site/home.html

Any thoughts would be really appreciated.

Thanks,
-Chris
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE8 bug with background color on tags?

[Vincent Pollard]

I've been struggling with something this afternoon in IE8 and have
finally fixed it.
It appears that if you have an  with an image inside and a
background colour set on :hover and a  tag after it, the
background colour actually makes the  tag grow in height! If you
change it to transparent the problem is solved.
Now you'd probably never usually need a background colour on an  with
an image inside but in my project we use background colour on links
(like Flickr does) and sometimes the client puts images inside a tags.
Has anyone come across this? Is it an IE8 bug or is there some part of
the CCS specifications that I'm overlooking here?
Is this expected behavior or a crazy bug as I suspect?
Vince

HTML TESTING CODE:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/1999/xhtml";>


Untitled Document
 
div {
text-align: center;
float: left;
}
a:link, a:visited {
text-decoration: underline;
color: #666;
}
a:hover {
text-decoration: none;
background-color: #666;
color: #fff;
}
a.noBg:hover {
background-color: red; /* change this to transparent or none to
fix the issue */
}
a img {
border: none;
}





http://www.bbc.co.uk/"; class="noBg">http://ase.tufts.edu/classics/classicalnews/img1.gif"; alt="spinny
image" />Text Link





__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centered text positioned incorrectly in IE7

[Chris Hanks]

Hmm, alright. Can you or anyone else on the list suggest a better way of
making this work? I'm not sure where to begin...

Thanks!
Chris



On Mon, May 4, 2009 at 7:47 PM, Gunlaug Sørtun  wrote:

> Chris Hanks wrote:
>
>  http://www.selfsoothingsoftware.com
>>
>
>  The second, and more pressing problem, is that my main content (the text
>> column and floated boxes) appears completely out of whack in IE.
>>  The boxes are approximately in the right place, but IE7 is trying to
>>  center the paragraphs of the text column midway between the floated boxes
>> and the opposite edge of the screen, and I'm not sure how to make it stop.
>>
>
> Without looking at it in depth: min-width/max-width acts as
> 'hasLayout'[1] triggers in IE7, which causes the effect you're describing.
> In my (very personal) terminology you get "a hard margin on a block
> formatted element", which means the margins on paragraphs won't flow
> behind the floats but instead line up against them, and the paragraphs
> become isolated square blocks.
>
> No other way to fix that IE7 'hasLayout' bug but to delete the
> min-width/max-width 'hasLayout' triggers, and find another way to add
> the space at both sides. If you want/need to support IE6 you'll have to
> create such an alternative solution anyway.
>
> regards
>Georg
>
> [1]http://www.satzansatz.de/cssd/onhavinglayout.html
> --
> http://www.gunlaug.no
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE 8

[Reese]

Kathy Wheeler wrote:
> On 05/05/2009, at 5:25 AM, Court Kizer wrote:
> 
>> I recommend staying away from multiple IE I can think of 20 instances
>> where it will render different from a machine with the real thing.
>> Virtualiin is free.
> 
> I have asked for documented proofs of this before and so far have  
> received none! Not even sample URL's. I would appreciate more details  
> on those "20 instances".

Here's one:
Standalone IE6 does not support .png images.
Multi-IE6 on XP with IE7 installed, does.

I shouldn't need to provide urls for that, so I won't. It isn't 
necessarily a rendering difference per the description above, but
it's a proof that Multi-IE6 isn't the same as IE6. It stands to
reason that there will be other differences, with no reason to
doubt that rendering per the above will also be affected.

Reese
--
http://inkworkswell.com

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Large amounts of text with CSS

[Jukka K. Korpela]

Ellen Heitman wrote:

> My site has large amounts of text (basically you will be able to read
> the contents of a book on my site, divided into chapters). I found
> the best way to manage the amount of text (we're talking 50+ pages of
> a PDF document) was to put all the text into an iframe, and manage it
> in a separate HTML file.

That sounds quite odd. The normal approach is to divide the book into 
smaller pieces, e.g. by chapters, and set up an index page, and possibly 
offer also the alternative of accessing the book as a single HTML file, e.g. 
for printing.

> Is this the best way to handle this with
> CSS?

The structural question is not a CSS issue. Your choice with it affects the 
type of CSS problems you need to solve, though not that much.

Frames are not a CSS thing at all but a matter of markup, and largely out of 
fashion for good reasons, though iframes have some job to do in this 
imperfect world. If you use an iframe, you need to remember that the 
 element creates an inline frame where the referred document is 
displayed _independently_. It is immune to everything you say in style 
sheets for the embedding document. They can share style sheets of course, 
just as any two documents can, but for that you need  elements in both 
the embedding document and the embedded document.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/ 

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Large amounts of text with CSS

[Ellen Heitman]

Hello. I'm kind of new to CSS. I have been creating a site using Photoshop,
slices, and tables, and I'm going to make the leap, tear the whole thing
down, and rebuild it the right way.
My site has large amounts of text (basically you will be able to read the
contents of a book on my site, divided into chapters). I found the best way
to manage the amount of text (we're talking 50+ pages of a PDF document) was
to put all the text into an iframe, and manage it in a separate HTML file.
Is this the best way to handle this with CSS? (By the way, the user does
have the option to view the file as a PDF, but I'm providing it directing in
a scroll-down window as well.)

Thanks for any help!
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE 8

[Vladislav Vladimirov]

> plus: it doesn't contain IE 7

Yes - it doesn't, but the same team that developed it (Tredosoft) have
come up with an IE 7 Standalone version:

http://tredosoft.com/IE7_standalone

It is packed separately, because at the time of release IE7 was the
latest IE version, and you could either have an original IE 7 and want
to use previous versions (multiple IE), or don't want to upgrade yet,
but install just a IE 7 standalone for testing purposes.

Regards,
Vladislav Vladimirov
http://www.ovalpixels.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] ie/6.0 image positioning

[David Laakso]

Alan Gresley wrote:
> David Laakso wrote:
>> re: 
>> Unable to position thumbnail in left column flush right to an 
>> imaginary right side drop-line from the navigation links above it.
>>
>
>
>
>
> That is a very hacky style sheet. :-)


That is a very stupid browser :-) .


>
>
> * html #f img{ position:relative;right:-31%; }
>
>
> and the image will be flush.
>
>
>
Thanks, Alan.
~d









__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] eCommerce site IE6 Bug Busting

[WEZ!]

Heya All, got to that 'bash-head-against-wall' stage in the web 
development where I try to solve IE6 rendering issues. Working in 
XHTML strict. Site is here:

http://www.rasbazaar.com.au
Standard page html is here:
http://www.rasbazaar.com.au/skins/V4Bazaar/styleTemplates/global/index.tpl
layout css doc
http://www.rasbazaar.com.au/skins/V4Bazaar/styleSheets/layout.css
and style css
http://www.rasbazaar.com.au/skins/V4Bazaar/styleSheets/style.css



There are about 6 issues that I'm trying to resolve left to work on 
and any help would be so greatly appreciated.

1) The footer bar at the base of the page has its left cap acting 
like full height. (#rndftbar) providing a height to this or the .tm 
(middle section) causes the footer bar layout to fail.


2) Base of rounded blocks and header bar aren't being rendered 
correctly. The index's page central gold block should have a black 
outline to the very base courtesy of the image that is replicated 
along there. The block has a set height but somewhere the image is 
being pushed down and then cropped off with overflow:hidden. Removing 
the overflow brings it to normal appearance but can cause issues with 
font size alterations.

The very top bar has the same problem with enlarge font size pushing 
the background image down and cropped bt overflow:hidden which can't 
be removed here. Compliant browsers keep the image at the base and 
let the content overflow it. Testing haslayout cure had no effect.


3) The left footer image on the cart page (click View Basket) is 
indented. This is exactly the same code from the standard page. Here 
is the page code:
http://www.rasbazaar.com.au/skins/V4Bazaar/styleTemplates/global/cart.tpl
compared to the index page. I can't seem to find any reason for this move.


4) Problems with site elasticity. I'm running the width expression as 
given by guru Georg. Upon shrinking fully the left column loses its 
negative margin and lays over the central column. The initial 
shrinking at large size causes a break in the central block which 
means the shrink isn't fluid. The scaling pixels sizes are correct 
however as far as I can tell.

5) IEpng integration causes the layout to break. I've had this issue 
before with a far more transparent intensive site.

6) No hover on elements but whatever hover script hasn't been 
implemented fully yet.

Any assistance would be greatly greatly appreciated. The code isn't 
easily accessible due to the cart system I'm running on this site so 
ask for any code that I haven't provided above. Regards

Wesley Lamont

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/