At 03:13 PM 1/12/2006, Patrick Roane wrote:
>www.pdrsolution.com/waters/index.html
>
>and we talked today. She uses AOL/IE as her browser
>and has her view -> text size set to 'large' or
>'larger'(not sure which one) where as I have mine set
>to medium. The problem (as you can guess) is that the
>text on the left side under the logo breaks out of the
>box.
Hi Patrick,
It seems clear that your box needs to stretch vertically, especially
since it can't stretch horizontally. Why isn't it stretching
vertically now? Because of this rule:
#left-box {
position: relative;
Doing this takes it out of the flow, so its parent container doesn't
stretch to accommodate it. Re-examine your rationale for using
relative positioning; I don't see any compelling reason for it.
Glancing quickly at your page source, I can see some other issues:
- you've got script tags outside the head
- you've used a DIV for the logo -- I recommend using H1 so your page
has a semantic headline for search engines & screen readers. I
usually do this:
<h1><span>Aardvarks Are We</span></h1>
h1
{
width: 123px;
height: 456px;
background: url("../images/logo.png") left top no-repeat;
}
h1 span
{
position: absolute;
overflow: hidden;
width: 1000em;
left: -2000em;
}
This suppresses the headline text from display without removing it
from the semantic content of the page, and replaces it with your logo image.
- You're using BR tags in the HTML to create visual spacing. Take
those out and instead use top & bottom margins and/or padding in the
stylesheet.
- You've used class="orange" which will seem silly & confusing after
the next web design when the client changes her color palette. Try
to use ids & class names that convey the semantic intention of
elements, and leave all the design indicators to the stylesheet.
- Run your page through an HTML validator such as
http://validator.w3.org/ You've only got three errors at this point.
Good luck!
Paul
______________________________________________________________________
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/
