7 replies [Last post]
cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 6 years 27 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

Hi!

I've realized that content on this page

http://www.bizstudio.ca/

Doesn't scroll in IE. IE 6 thinks the content ends at the bottom of the left-hand sidebar (ie the Subscribe button). Anything longer than that can't be scrolled down to or seen!

I did locate the following page which seemed to describe my exact situation - but after applying the "Holly hack" in the manner prescribed, I see no change.

http://www.positioniseverything.net/explorer/unscrollable.html

Below, I've included all the CSS which applies to the layout (though I assume it's only the #wrapper and #content divs that are relevant). Am I doing something wrong or is it something else entirely that's causing this?

I sure need to fix it quick, the site's only half-visible to IE users... yikes!

Many thanks,
Adam

#wrapper { width: 766px; margin-left: auto; margin-right: auto; text-align: left; }

* html #wrapper {
height: 1%;
}

#header {
position: relative;
}

#infobox {
width: 440px;
position: absolute;
top: 100px;
left: 300px;
background: url(http://www.bizstudio.ca/images/infobox_bg.png) repeat top left;
font-family: "Arial, Helvetica, Sans-Serif";
font-style: italic;
font-size: 85%;
font-spacing: 3px;
}

#infobox p {
margin: 10px 10px;
}

#content {
width: 545px;
position: absolute;
left: 175px;
top: 225px;
background: white;
border: 1px solid black;
padding: 15px;
}

* html #content {
width: 545px;
w/idth: 545px;

}

#sidebar {
width: 120px;
margin-left: 15px;
margin-top: 0;
padding-top: 0;
float: right;
}

* html #sidebar {
width: 165px;
w/idth: 150px;
}

#sidebar ul, #sidebar li {
list-style: none;
margin-left: 0;
padding-left: 0;
}

#sidebar li {
margin-top: 3px;
}

#infobar, #infobar p {
margin-top: 10px;
margin-left: 7px;
width: 150px;
float: left;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3em;
}

#infobar p {
margin-top: 10px;
margin-bottom: 0;
}

#sidebar p {
line-height: 1.5em;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

A large part of your problem

A large part of your problem will rest with the fact that you have some shocking malformed markup going on, you simply must get in the habit of valadating your code to catch these sorts of errors, although to be honest these are obvious to the naked eye; example:

There are two serious errors in that little snippet alone.With these sorts of errors it's pointless trying to think about correcting any perceived problems, as likely many rendering problems will clear up with correct markup.

Having validated and corrected these errors you should then think about the use of position:absolute to position elements, it's a bad approach.

When the errors are corrected post back and we'll check through and help with any remaining problems.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 16 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Actually, the 'fix' does

Actually, the 'fix' does work. I'd suggest using Claire Campbell's hasLayout tripswitch as being more benign. Do this:

#header {
	position: relative;
  display: inline-block;
}	

#header { 
  display: block; 
  }
Clue: you must use both #header blocks.

Hugo is quite right, though, about the general approach you've used. Using AP elements like an old newspaper layout board to paste things in place is full of gotchas. There are places for it, but not as a general layout method.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 6 years 27 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

Thank you Gary, the idea of

Thank you Gary, the idea of applying the fix to the _header_ was what solved it! It never would have occurred to me that this element was the one that needed tending to, since the "content" div comes after it, not within it...

I confess I simply added a "height: 1%" rule to the header div and now IE behaves! Hooray.

This was one of the first sites I built entirely in CSS. Next time I guess I will avoid this sort of layout, though I did assume that something like the "overlap" of the content with the blue-sky header was simply one of those nice options in my CSS toolbox. Though I know better than to try to overposition everything absolutely, I do like at least being able to have one area positioned like this... shame about IE being such a pain.

Then again, if I was able to solve it with one small rule (on the right element!)... frankly I don't see a compelling reason to avoid it...?

Hugo, that code is from within Wordpress, I didn't create it, and I'm looking for the other obvious error besides the unnecessary and unidentified div around the form elements.

I will run the page through validation though, just as an exercise in more correct CSS.

Many thanks for the advice and help!!!!

Adam

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 16 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Quote:since the "content"

Quote:
since the "content" div comes after it, not within it...

Look again. #content is the child of #header. The parent was what you needed.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:

Quote:

Hugo, that code is from within Wordpress, I didn't create it, and I'm looking for the other obvious error besides the unnecessary and unidentified div around the form elements.

I will run the page through validation though, just as an exercise in more correct CSS.

Sorry Adam the code is not from within Wordpress, at least not wordpress as delivered out of the box, someone has coded those errors in, which is a shame when wordpress has strived to produce standards valadating code, personally if that is from someones attempt at writting a 'theme' then really they should not have bothered or thought to release the theme, if it's your code and your not sure of the problems then we can endevour to explain and educate, and by the way re valadating, initially it's the markup that requires checking don't worry too much about css valadation at this stage.

Oh and I was less concerned about being right about the layout approach as I was of the errors, can we please not asume as the 'fix' is presented that the markup errors were or are not of greater concern first and formost!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 6 years 27 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

Indeed you're right of

Indeed you're right of course!

Thanks Gary.

Hey, how does a post get marked as [solved] ?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 15 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

You can either edit the

You can either edit the first post yourself or we do it occasionally Wink

Verschwindende wrote:
  • CSS doesn't make pies