Hi! I have a CSS Browser Issue!

HTML & CSS
1

Hello. we’re currently having a browser issue with a CSS sidebar code I am using. In Chrome, this code seems to work fine. Everything we’ve added displays correctly and there are no scrolling issues. (Chrome screenshots below).

However, in IE8, and all versions before and after it…the sidebar content not only doesn’t display in full, but it displays overlapping the IE page scrollbar! (IE 8 screenshot below)

There’s also an issue specific to IE8 with the background image.caused by this sidebar. When I scroll down the page, the background image remains fixed. However, in Chrome, it moves down the page with the content as it should. So with this sidebar installed, on IE8 you can scroll down the content in the body of the page, but the sidebar content doesn’t display in full as you move down the page, and the background image doesn’t move down as you scroll either. It remains fixed. Here is a [URL=“http://horrormoviesandstuff.com/Jurassic-Park-4-becomes-Jurassic-World.html”]LINK

to the page in question, and here is the full sidebar CSS…

<style type="text/css">
 body{
  margin:0;
  padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
 }
div#left-sidebar{
  position:absolute;
  top:30px;
  left:0;
  width:left-sidebar-<length>;
  height:100%;
 }
 div#right-sidebar{
  position:absolute;
  top:30px;
  right:0;
  width:right-sidebar-<length>;
  height:100%;
  background: #161616 !important;

}
 }
 @media screen{
  body>div#left-sidebar{
   position:fixed;
  }
  body>div#right-sidebar{
   position:relative;
  }
 }
 * html body{
  overflow:hidden;
 }
 * html div#content{ height:100%;
  overflow:auto;
 }
</style>
<div id="left-sidebar"></div>
<div id="right-sidebar">
</div>


<div id="content"></div>

This code allows you to add two sidebars but I am only using RIGHT SIDEBAR in the code in question.

2

Hi,

The first thing you need to do is fix the doctype as you are using one from the last century.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2//EN”>

Use this instead and it will put IE into standards mode.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Then you need to look at the css that you have in the head of your page.


<style type="text/css">
 body{
  margin:0;
  padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
 }
div#left-sidebar{
  position:absolute;
  top:30px;
  left:0;
  width:left-sidebar-<length>;
  height:100%;
 }
 div#right-sidebar{
  position:absolute;
  top:30px;
  right:0;
  width:right-sidebar-<length>;
  height:100%;
  background: #161616 !important;
  
}
 }
 @media screen{
  body>div#left-sidebar{
   position:fixed;
  }
  body>div#right-sidebar{
   position:relative;
  }
 }
 * html body{
  overflow:hidden;
 } 
 * html div#content{ height:100%;
  overflow:auto;
 }
</style>

This is not CSS:


right-sidebar-<length>

It looks as though it is some variable that should have been parsed and turned into CSS. You will need to fix that from your end as it is not a css problem as such. It shouldn’t be in there along with those other similar rules.

Then you haver a stray closing bracket here:


div#right-sidebar{
  position:absolute;
  top:30px;
  right:0;
  width:right-sidebar-<length>;
  height:100%;
  background: #161616 !important;
  
}
 } [B]/* what's this bracket doing here */[/B]
 @media screen{
  body>div#left-sidebar{
   position:fixed;
  }
  body>div#right-sidebar{
   position:relative;
  }
 }

That extra bracket makes all the browsers miss the next media screen rule (apart from IE) which is lucky because the other browsers miss the position:fixed that you have specified. Therefore you need to decide what you were supposed to be doing with that rule and probably remove it along with the stray bracket (as browsers aren’t seeing it anyway).

Which leaves us with valid code as follows:


body { margin:0;  padding:0 }
div#left-sidebar {
	position:absolute;
	top:30px;
	left:0;
	height:100%;
}
div#right-sidebar {
	position:absolute;
	top:30px;
	right:0;
	height:100%;
	background: #161616 !important;
}

* html body { overflow:hidden; }
* html div#content {
	height:100%;
	overflow:auto;
}

However the last two rules are for IE6 only and look like the old position:fixed hack and as you aren’t using position:fixed then I guess they can be thrown out also.

3

Hi, thanks for assisting! But in the process I found the solution for some of my problems lied in the hidden and auto attributes. I changed this…

body>div#left-sidebar{
   position:fixed;
  }
  body>div#right-sidebar{
   position:relative;
  }
 }
 * html body{
  overflow:hidden;
 }
 * html div#content{ height:100%;
  overflow:auto;
 }
</style>
<div id="left-sidebar"></div>
<div id="right-sidebar">
</div>
}

to this…

 body>div#left-sidebar{
   position:fixed;
  }
  body>div#right-sidebar{
   position:relative;
  }
 }
 * html body{
  overflow:auto;
 }
 * html div#content{ height:auto;
  overflow:hidden;
 }

I just need help with one more thing. Some people browse differently, using sidebars and stuff on chrome or IE or MSN? What would I have to add to the CSS so the sidebar automatically scales back to make up for that lost bit of space? So things don’t look smooshed together and cramped in smaller browser windows like an MSN, IE (with favorites bar open) or Chrome (with Chrome bar opened)?

4

No you didn’t find the solution as I already gave that to you.:slight_smile: Please read my post again to understand the full implications as it is based on years of troubleshooting these issues.

What you actually did was add more broken code into the mix.

Whilst it may have appeared to work it is only functioning because good browsers are missing the rules you changed because of the misplaced bracket I mentioned and as IE is working in quirks mode(no current doctype) it is therefore reading the IE6 rules that you have in place (* html etc). I mentioned to you you that the last two rules were a fix for IE6 to add fixed positioning and because you are in quirks mode all browsers from IE9 and under will behave as they are IE5 and read those rules.

It’s not a situation that is ever likely to render consistent results as you are a) just lucky that good browsers are not reading the rules and; b) lucky that you have reduced IE to a browsers seen last century so it reads the bad rules when it shouldn’t.:slight_smile:

I just need help with one more thing. Some people browse differently, using sidebars and stuff on chrome or IE or MSN? What would I have to add to the CSS so the sidebar automatically scales back to make up for that lost bit of space? So things don’t look smooshed together and cramped in smaller browser windows like an MSN, IE (with favorites bar open) or Chrome (with Chrome bar opened)?

What do you mean by scales back exactly?

Presently you have absolutely placed the sidebar to the top right of the page which means that it will just overlap anything in the way because that’s what absolute elements do. The only thing you can do in your design as it strands is to put a min-width to hold the page open before the sidebar overlaps the content and then float the sidebar right instead of absolute positioning. This will just keep the page wide and users of small screens will need to scroll


html,body{min-width:1060px}
div#right-sidebar {
  position: static;
  float:right;
  margin-top: 30px;
}

Of course that won’t work in IE until you change the doctype because IE doesn’t understand min-width when in quirks mode (as it basically reverts to something similar to ie5 in quirks mode and doesn’t understand any of the new rules that all modern browsers understand). So as I said it is vitally important that you change the doctype and apply the fixes I have already mentioned.

To be honest the page could do with some loving care as it has no structure and will not work well on today’s devices so now would be a good time to think about a re-design and build in some clean code from the ground up.

5

I cleaned up the bracket and the <length> attributes you mentioned above. As for the doc type we are not interested in changing that right now, our site can be viewed on IE8 and above, and Chrome. And MSN and firefox. We’re fine with that. When I mentioned I found the solution, I meant for the scrollbar issues I was experience where I couldn’t scroll down the page and additional content after the adsense 160x600 wouldn’t display.

Let me be more clear on the scale thing I mentioned. I need the page to automatically re-size to the width of a users sidebar. It did that before without the sidebar we just added. But now that the sidebar has been added…the page no longer automatically re-sizes to fit the browser window. So if someone opens IE’s explorer bar, or is using MSN explorer which has a sidebar/searchbar…the page content some of it vanishes underneath OUR sidebar, because their sidebar is pushing the content further to the right. I need to know what to add to the sidebar code so the page will autotmatically resize along with someone’s sidebar. Whether they expand their sidebar, or decrease it. So if someone for example opened their IE favorites bar, and it was about 5 inches wide? I need OUR sidebar to scroll out of view…5 inches. If they expand it to 20 inches…OUR sidebar needs to disappear over to the right to make up for the lost 15 inches. That’s what I mean as an example.

6

Hi,

Notwithstanding the fact that I have given you the code that will do what you want and without wishing to offend you are suffering from a number of common misconceptions which I will try and explain more clearly and may help with your decision.

The first is that there is not just one size of viewport ( the area in which your page is displayed in a browser) as that depends on the resolution the user has set, the size of the device they are using and whether they have their browser open fully or not (few people open their browsers fully anyway). So what you see on your computer is not what I see on my computer especially as I have many windows open and the browsers tucked into half the screen

When you open a sidebar in the browser (such as the history or favourites panel) then all you are doing is reducing the space available for your display. Its the same as grabbing the edge of the browsers and making the browser smaller as far as your content is concerned.

If you have designed your page at a fixed width (which you have) then nothing can change that fixed width without re-coding the elements in the page to adjust accordingly. The only reasonable solution for your sidebar (without re-coding the whole thing) is to implement the code I gave you. This will put the sidebar on the right but maintain a min-width. When you open your history panel the content will get pushed to the right and the right sidebar will disappear off the right of the viewport and the browser will show a horizontal scrollbar so that you can scroll to it. This is what the code I gave you will do in all the major browsers (except ie9 and under unless you change the doctype).

Not changing the doctype is simply not an option as you can’t use something from last century and expect it to function on modern browsers. If you don’t change it then you can’t use min-width as that was only available since ie7 and as I have already said you are forcing ie9 and under to render like IE5 and not understand much css at all.

Without using min-width I can’t see an easy fix. You culd possibly float the sidebar to the right and then the content to the left but this would mean that your sidebar would move to the top of the page when you narrow the screen and look abit odd with all your content dropping below it. Alternatively move your sidebar html after the closing div of your Content wrapper and then float the content to the left (width the exact width) and the float the sidebar to the right. When the screen is narrowed the sidebar will dropdown under the content and not obscure it. I believe these are the only suitable options for you at the moment.

As an aside you keep mentioning IE8 as though it is the main browser but its usage is down to 7% and chrome is the major contender now at 44% with Firefox at 20% and ie9+ at 15%. Ie8 is a marginal browser and in a couple of years will be gone.

However, and I can’t stress this enough, if you don’t change your doctype then ie9 and under will render like IE5 and use the broken box model, contain millions of bugs, need haslayout everywhere, not understand min or max-width, the child selector, hover on anything except anchors…the list goes on.

I really urge you to reconsider and jump into the 21st century. Lavish some tender loving care to that page as it is a bit of a mish mash of outdated design techniques and frankly looks broken even though that’s how you wanted it to look. This is meant as constructive criticism as we have all been in the same boat at some time :slight_smile:

BTW you also have some scripts running that are crashing my browser as I have lost this post three times now:( (which could be because of one of the 136errors)

7

Ok I changed the doc type and put in your code. But now, the side bar is displaying on top of my content.

8

Good that’s a start :slight_smile:

Remove the css you have in the head completely:

this lot:


body{
  margin:0;
  padding:0 right-sidebar 0 left-sidebar;
 }
div#left-sidebar{
  position:absolute;
  top:30px;
  left:0;
  width:left-sidebar;
  height:100%;
 }
 div#right-sidebar{
  position:absolute;
  top:30px;
  right:0;
  width:0;
  height:100%;
  background: #161616 !important;
 }
 @media screen{
  body>div#left-sidebar{
   position:fixed;
  }
  body>div#right-sidebar{
   position:relative;
  }
 }
 * html body{
  overflow:auto;
 } 
 * html div#content{ height:auto;
  overflow:hidden;
  }

Then replace it with this lot:


html,body{
min-width:1150px;
margin:0;
padding:0;
}
div#right-sidebar{
position:static!important;
margin-top:30px;
float:right;
width:160px;
}
#content{width:990px;overflow:hidden}
.mattblacktabs{width:990px!important}
table.bordercolor{
width:990px!important;
table-layout:fixed;
}

That should hold the window open at least.

It’s very difficult to give you an easy answer because the html really should be changed into a proper structure as at present its a load of disparate elements all fighting over room space.

And of course use the doctype I gave you originally :slight_smile:

9

Ok this worked in a way, but the problem now is the text on the page stretches too much and the social buttons are affected and everything looks weird and out of joint. There’s a huge gap between the content and the 160x600 banner now. Let me ask you, is there a way where the page can stay tight and have the sidebar inch over instead based on how big or small the window is? I would prefer if the sidebar would vanish halfly off of pages with a smaller browser window. How can we achieve this? For example…as the page gets smaller, the sidebar instead of moving over where people can scroll over? The sidebar just vanishes into “the black” or off the page. And then when the page is widened again, the sidebar returns to full view. So for example…if there’s an 8 inch sidebar on the left hand side of someone’s browser? Our sidebar moves over/vanishes 8 inches off the page on the right side, into a black space. I also don’t want the article-text to follow the sidebar. The text needs to remain where it is, so when our sidebar moves over into vanishment a few inches depending on how small or wide someone’s browser sidebar is, it’ll allow the text to be seen, hence the purpose of this exercise.

10

I posted a screenshot below. To be more clear.

This is how the page looks in IE with the favorites browser set to its smallest width. Pretty good, but I need the whole navbar to show. This screenshot is MINUS your code by the way. As of now, you only see the letters “C” “O” “M” of the COMMUNITY link. Where the sidebar currently is? The blue/white arrow on the screenshot? I need the sidebar to scooch over to where the green arrow is. BUT I DON’T WANT THE ARTICLE TEXT TO FOLLOW IT. Using your current code, the article text extends outward to try and meet the sidebar in its new location. I need the article text to not stretch, and remain fully where it currently is. Just the sidebar should move over.

And it needs to disappear off the page whatever inches the favorites bar is open. So instead of the text moving outward to meet the sidebar, the sidebar just needs to scooch over a smidge to allow the content I mentioned above to be seen. And not leave a gap. And then if someone widens their IE favorites bar, the sidebar would scroll right further out of sight.

11

Here’s a link to an example of what I am trying to go for. If you view this in IE, you’ll notice as you widen your FAVORITES BAR, their sidebar scrolls over out of view. And as you shorten your FAVORITES Bar, their sidebar scrolls more into view. Yet everything remains tight, and the sidebar doesn’t space out too far from the content, and cause stretching. That is what I am trying to get our sidebar to do/act in IE browsers.

12 
Here's a link to an example of what I am trying to go for.

That page uses this background image for the ads and then some javascript to trap the clicks. That page also has a sensible structure with all its main content contained with a centered wrapper.


#wrapper {
    margin: 0 auto;
    position: relative;
    width: 980px;
}

Your page doesn’t have that structure (it doesn’t have any structure as such) and therefore you cannot use that method unless you can make significant changes to the html. I can give you the code if you are prepared to make the changes but I’m not going to spend hours re-writing it if you don’t use it or are unable to change it on your system.

Ok this worked in a way, but the problem now is the text on the page stretches too much and the social buttons are affected and everything looks weird and out of joint

Then you did not follow all my instructions correctly or missed something along the way.:slight_smile:

Here are some screenshots first showing your normal page and then showing the page with my additions.

  1. Your current page (which is badly broken in my browsers):

  2. Your page with my code added

3)My page at smaller browsers widths - note the advert is now disappeared to the side

  1. My page with the sidebar open - the ad is pushed out to the right

This is the best you can hope for in your current structure.

If you want a cleaner page then you will need to create a wrapper for all your content and center it like the site you linked to. Then you can place adverts at the side using the technique that I outlined some time ago in a recent quiz.

Simplest html for this to happen:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin:0;
	padding:0;
}
h1, p { margin:0 0 1em }
#page {
	width:760px;
	margin: auto;
	text-align:left;
	background:red;
	position:relative;
	z-index:2;
}
#adholder {
	width: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
#adinner {
	width:760px;
	margin:auto;
}
.adright, .adleft {
	width:160px;
	position: relative;
	margin:0;
	float:left;
	height:600px;
	overflow: hidden;
	background:#52b502;/* for testing */
	z-index:99;
	display:inline;
}
.adright {
	float:right;
	left:170px;
}
.adleft { left:-170px }
</style>
</head>
<body>
<div id="adholder">
		<div id="adinner">
				<div class="adright">Advert goes here</div>
				<div class="adleft">Advert goes here</div>
		</div>
</div>
<div id="page">
		<h1><a href="#">Centred page content goes here</a></h1>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
</div>
</body>
</html>

The ball is in your court really.:slight_smile:

If you can’t change the html in the page then your only other option would be to write a script that hides the advert if the viewport is narrower than your widest content. The javascript forum should be able to help with that.

13