IE hacks: div and css

[dakke]

I use a joomla installation for a website, trying to get this portfolio setup. All works just fine on firefox and safari, but IE seems too be an issue. Myself work on a mac, so no IE there, but this ain't a mac world. I have no clue where to start, but I suppose that some of you will have a good idea on how buggy this css is.The html site. The HTML is the code without the actually content (it's the template of joomla, and not an example of the content generated by joomla), it shows the div and the joomla code that actually creates the content. I thought it would be good enough to illustrate the point (what I'm missing for IE). The code that generates the content is:

<jdoc:include type="component" />

The actual template HTML:

<div class="center">	<div class="links_topbanner" align="">		<img src="<?php echo $this->baseurl ?>/templates/images/haaklinks.jpg" border="0" alt="<?php echo JText::_('Everyone needs an index, right?'); ?>" />	</div>	<div id="links_container" align="">		<jdoc:include type="component" />		<div id="links_bottombanner" align="">			<img src="<?php echo $this->baseurl ?>/templates/images/haakrechts.gif" border="0" alt="<?php echo JText::_('Everyone needs an index, right?'); ?>" />		</div>		</div>	</div>

and the CSS of it:

/* CSS for the INDEX */div.center {	position:absolute;	width:1024px;	height:100%;	text-align:center;	left:50%;	margin-left:-512px;}.links_topbanner {	position:absolute;	top:40px;	left:-42px;	z-index:10;}div#links_container {	width:475px;	position:relative;	left:425px;	top:100px;	bottom:120px;	z-index:11;	text-align:left;}div#links_bottombanner {	position:absolute;	left:500px;	bottom:-10px;	z-index:11;}div#links_content {	width:500px;	position:absolute;	top:94px;	left:400px;	bottom:40px;	z-index:12;	text-align:left;}

[dakke]

I should have mentioned that the problem is that the content is wider than it should. I set the general DIV to 1024px and in internet explorer this becomes wider as such.

[Ingolme]

Are you sure that it's wider in Internet Explorer?It most likely isn't. I'm thinking your problem probably is the fact that Internet Explorer always has a scrollbar on the right even when the page doesn't need to scroll, and it causes there to be a horizontal scrollbar.You can take the scrollbar away by writinghtml,body { overflow: hidden; }orhtml,body { overflow: auto; }Another thing I just thought of: the body of the document sometimes has margins or padding around it by default, so you can add another line of CSS to fix that:html,body { overflow: auto;margin: 0;padding: 0;}I recommend you use a smaller width for your page than exactly 1024px if you want to be sure that a horizontal scrollbar won't appear on your page. Lots of people use 960px. And if you worry about screen resolutions of 800x600px then you can use 760px.

[dakke]

Thanks a lot for the reply! I wasn't notified, so sorry for the late response. Thanks for the comment and really helpful.I did resize it to 980px instead of 1024. But I understand I should use 960 right? Anyway, the site is almost done apart from a proper menu (working on it) and the width. I added a url so you can check out the css and width.http://sarahverroken.com/site/index.php?op...9&Itemid=28and another one:http://sarahverroken.com/site/index.php?op...8&Itemid=28Thanks again for the reply!

[dakke]

I've been testing on mac for firefox, safari and opera and all is just fine.Win firefox works fine, IE7 does not and is really bad. Check an example at:http://sarahverroken.com/site/index.php?op...7&Itemid=18Check firefox to see how it should look and than compare with IE.How come the left image goes all the way to the right? I have no idea and have no clue on where to start. Float, relative, IE hacks?Any advice is more than welcome.

[webflex]

Hi,Here in my pc it seem to me equal in both browsers.See the following images:Firefox:IE7:Complements \o/

[dakke]

I got it fixed, so you saw it all good by:I fixed by wrapping another div around the left image, and by giving that div a ID instead of class. Does anybody has an explanation for that?What it did (I think) is that the class had no effect on the div, and it centered the div. By centering it, the image 'started' in the center and looked as if it was outlined to the right.Thanks for your reply!I finally got a good way of testing it: IES4OSX.