[css-d] Newbie Resolve IE sizes to other

[tony]

Hi,

Sorted a layout in IE7 and passed validation but layout in Gecko fell apart
- width issues.
So resolved layout in Gecko but now IE7 fails to  match as can be seen at:
http://www.somersetspiess.co.uk/trialScene2.html

Can anyone please suggest how I bring IE7 layout back into line.

Reconciled to:
Not IE6 compatible - yet
Not laptop friendly, fixed width.

Apologies for previous posting, in relief at reaching a layout forgot I was
but at the foothills of the mountain with validation still to surmount.

Tony
__
css-discuss [EMAIL PROTECTED]
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] Newbie Resolve IE sizes to other

[Gunlaug Sørtun]

tony wrote:

> Sorted a layout in IE7 and passed validation but layout in Gecko fell
>  apart - width issues. So resolved layout in Gecko but now IE7 fails 
> to  match as can be seen at: 
> http://www.somersetspiess.co.uk/trialScene2.html
> 
> Can anyone please suggest how I bring IE7 layout back into line.

Give IE a "strict-mode" / "standards mode" triggering doctype.
The one you have is incomplete and makes all browsers stay in the old
"quirks mode". IE has its own box-model in that old mode.


Your original CSS runs into too many IE bugs, so to give you a place to
start I made it more IE-friendly - including IE6...



Also introduced more floats and removed height-restrictions, to make it
generally more cross-browser friendly.

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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Newbie Resolve IE sizes to other

[tony]

Georg,
As always in awe of your ability to see the causes amongst all the dross,
thanks.
Am getting the sense of the changes you made.
My starting objective was, beneath a fixed banner (code not included), to
arrange between 2 lines of h2 a bank of images aligned with 3 boxes of text
which would all be visible (before scrolling to following images), hence
initially I set the ContainerBoth height.
In Gecko mode your code adjustments display just fine but in IE7 text sizing
throws the text box heights out displacing the alignments.
How do I get control of height position and width of these floating and
variable height boxes of text in both IE7 and other browsers?

Also within IntroImage the p captions to the images are offset in IE7 but
are align correct within Gecko. Again how do I get them back into alignment
in IE7 and other browsers? I note for some reason on the middle image the p
starting "In_" is not visible.
Tony


-Original Message-
From: Gunlaug Sørtun [mailto:[EMAIL PROTECTED] 
Sent: 24 November 2008 15:20
To: tony
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Newbie Resolve IE sizes to other

tony wrote:

> Sorted a layout in IE7 and passed validation but layout in Gecko fell  
> apart - width issues. So resolved layout in Gecko but now IE7 fails to  
> match as can be seen at:
> http://www.somersetspiess.co.uk/trialScene2.html
> 
> Can anyone please suggest how I bring IE7 layout back into line.

Give IE a "strict-mode" / "standards mode" triggering doctype.
The one you have is incomplete and makes all browsers stay in the old
"quirks mode". IE has its own box-model in that old mode.


Your original CSS runs into too many IE bugs, so to give you a place to
start I made it more IE-friendly - including IE6...



Also introduced more floats and removed height-restrictions, to make it
generally more cross-browser friendly.

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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] xml and css tests

[Gabriele Romanato]

http://www.css-zibaldone.com/test/xml/

hope you enjoy. after the darkness, I'm back.

-- 
http://www.css-zibaldone.com/
http://www.css-zibaldone.com/test/ (English)
http://www.css-zibaldone.com/articles/ (English)
http://mimicry.css-zibaldone.com/   (Blog)
http://www.flickr.com/photos/gabrieleromanato/ (Flickr)
__
css-discuss [EMAIL PROTECTED]
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] Tabbed Navigation System

[David Hucklesby]

On Sun, 23 Nov 2008 11:14:25 -0800, yahoo wrote:
> On Nov 23, 2008, at 6:29 AM, David Laakso wrote:
>
>> You might try this:
>>
>> Assign a different body id or class to each page. 
>>
>
> Unfortunately, I can't do that.  The cart puts together those pages using one 
> 
> tag, so every page would have the same body tag class.
>
[...]
>
> Is there something else that I could try?
>

Do you have any control over the markup at all? Since you can't
use David's excellent suggestion, perhaps you can do what I do -
make the "you are here" link a STRONG element instead of a link.
It can share the CSS rule for layout, adding an extra rule just
for the "your are here" appearance (color, background, ...?).

Cordially,
David
--

__
css-discuss [EMAIL PROTECTED]
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] Can't put “ in a blockquote?

[David Hucklesby]

On Mon, 24 Nov 2008 01:02:22 +, Benjamin Hawkes-Lewis wrote:
> Peter Hyde-Smith wrote:
>> Will someone please enlighten me regarding whether different browsers render 
>> the
>>  differently. Do some actually add in the quote marks;
>>
>
> No, none do.
>
> In HTML4 browsers are supposed to add quotation marks for Q (inline 
> quotations) not
> BLOCKQUOTE (quotations containing blocks). Most modern browsers, including 
> IE8 Beta 2
> but not including IE6 and IE7, add such marks to Q. But you'd likely want to 
> adjust
> which marks with CSS.
>

Good thinking.

I'm working on a new site, and use scripting to add quote marks to Q
for IE 5-7. As beloved list mom Eric says, "JavaScript will save us all."

 

FWIW - If you use UTF-8 throughout your development cycle, you don't
need to use those ugly HTML entities. Kinder to your spell checker, too!

Cordially,
David
--

__
css-discuss [EMAIL PROTECTED]
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] Newbie Resolve IE sizes to other

[Gunlaug Sørtun]

tony wrote:

> My starting objective was, beneath a fixed banner (code not
> included), to arrange between 2 lines of h2 a bank of images aligned
> with 3 boxes of text which would all be visible (before scrolling to
> following images), hence initially I set the ContainerBoth height.

You mean you want end-users to have to use two scrolling-mechanisms in
order to view your content? May look nice on your screen(-size), but
won't fit anywhere else and is definitely not very user-friendly.

Generally: you either work with browsers to make things work well for
end-users, or you turn their own browsers against them and turn the
users away. It's your choice.

> In Gecko mode your code adjustments display just fine but in IE7 text
> sizing throws the text box heights out displacing the alignments. How
> do I get control of height position and width of these floating and 
> variable height boxes of text in both IE7 and other browsers?

Enlighten me...

Both Firefox 3 and IE7 have both text-resizing and page zoom. For your
page both resizing options work the same.

Text-resizing will always expand test, and the containers for text must
be allowed to expand or the text will overflow.

If you want to cap/control height, it'll soon start looking ugly.
IE6 will also be hard to control, since it doesn't respect declared
dimensions and can only resize text.

> Also within IntroImage the p captions to the images are offset in IE7
> but are align correct within Gecko. Again how do I get them back into
> alignment in IE7 and other browsers? I note for some reason on the
> middle image the p starting "In_" is not visible.

Note that I've used 'float: left' on those images to make them align.

Add...
.introimage p {clear: left;}
...to get the entire paragraph below image and into view.

I think you have made bad use of margins and text-indent on paragraphs
though, and it is this combination with the start of the text pulled
outside the paragraph proper that makes IE go buggy and push images and
text around.

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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Newbie Resolve IE sizes to other

[David Laakso]

tony wrote:
> Hi,
>
> Sorted a layout in IE7 and passed validation but layout in Gecko fell apart
> - width issues.
> So resolved layout in Gecko but now IE7 fails to  match as can be seen at:
> http://www.somersetspiess.co.uk/trialScene2.html
>
> Can anyone please suggest how I bring IE7 layout back into line.
>
> Reconciled to:
> Not IE6 compatible - yet
> Not laptop friendly, fixed width.
>
> Apologies for previous posting, in relief at reaching a layout forgot I was
> but at the foothills of the mountain with validation still to surmount.
>
> Tony
>   


At sometime, and at some point, you' ll need to to make a serious 
decision. Is ths site about you? Or is this site about the client? If 
the site is about the client keep it simple. No bells, whistles, smoke, 
or mirrors needed. A clean sheet, a clear mind, could make a difference. 
Or could it?

-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
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] xml and css tests

[David Laakso]

Gabriele Romanato wrote:
> http://www.css-zibaldone.com/test/xml/
>
> hope you enjoy. after the darkness, I'm back.
>
>   

Tell me about it. Having spent more time in locked wards than I care to 
remember, I aways look forward  to your posts and relies to the list. 
You bring not only fresh insight, but compassion as well when you write. 
Thank you.
~d

-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
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] Wrapper div will not center in IE

[RePost]

Only in IE, my maincontainer (wrapper) div appears to be shifting and 
ignoring the tried-and-true "margin: 0 auto;" style.

The only clue I can offer is that I don't have this problem with my blog 
in its current format. Although the styles haven't changed appreciably, 
the problem only occurs in my WordPress test blog.

Any suggestions?

Thanks.


Test site:
http://dwarfurl.com/9a685

Style sheet:
http://dwarfurl.com/37a99

Here's some of the relevant style:

body {
font-family:Arial, Helvetica, Sans-Serif;
font-size:62.5%;
min-width:926px; /* Prevent background from shifting */
background-color:#CCD2F1; /* matches edge color of background image */
background-image:url(../../../images/bodywrapper-gray-shift.gif);
background-position:center;
background-repeat:repeat-y;
}

#maincontainer{
width: 926px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
background-image:url(../../../images/wrapper-gray.gif); /*Fixes 
background on page resize*/
background-position:center;
background-repeat:repeat-y;
}

__
css-discuss [EMAIL PROTECTED]
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/