Previous Message
Next Message

persistent horizontal scroll bar and title refusing to wrap

Sent by Gunlaug_Sørtun on 16 March 2006 23:11


Michael wrote:
> http://www.sandsmuseum.com/test/tutor2.html

> 1.  Using IE(Mac), there is a persistent horizontal scroll bar.

The scrollbar is caused by absolute-positioning an element too close to
the right edge of body - an IE/Mac bug.
It should be gone by the time you have finished implementing a working
header - like the one suggested below, since there's no absolute
positioning left.

> 2.  The title refuses to wrap or if it does, it appears to be 
> following a hidden border.
....
> The image width will change.  I suspect I need another div but where?

No... you've got too many divs for the task already.

Delete the nested div-construction you have now, and try the following
for a start...

new HTML:
<div id="header">
<img src="someHeaderImage.jpg" alt="" width="432" height="95" />
<h1 class="headertext">The title for the page, a bit longer than usual.</h1>
</div>

<div id="container">
.... and so on...

new CSS:
#header {padding-left: 20px; border: solid 1px; overflow: hidden; zoom: 1; }
#header h1 {margin: 0; /* style the headline a bit further */}
#header img {float: right; margin: 0 0 0 3px;}

The above is self-adjusting, and will allow for changes in image-size.
The h1 (which is the correct element for a headline) will wrap nicely in
the space alongside the floating image.

The above is tested in IE5.2.3/Mac, Safari, IE6/win, Firefox 1.5 and
Opera 9tp2. Should work elsewhere too, but some older versions may need
some attention.

> 3.  Eventually I might like to reliably collapse the right nav 
> vertically.

Suggestion: use javascript to hide (collapse) and open (expand) the
right nav, and leave it _always open_ if/when javascript isn't active.

Note...
You have a body {border-color: transparent;}. Luckily there's no border
on body, as IE/win doesn't understand 'transparent borders' and will at
best color them black. It's IE's fault - not yours ;-)

regards
	Georg
-- 
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: