PDA

View Full Version : CSS issues with layout in IE 5 & 6 stretching page



Eternal_Howl
11-26-2007, 07:36 AM
I'm still fairly green to CSS, but am learning bits here and there and trying to build some kind of foundation so I can get away from using tables again.

I'd just finished a page and it was looking great, until I checked it out on the computer at work that must be using IE5.5 or 6 on XP or something lower than IE7 (which I am using). My friend uses Firefox and says it displays fine in his.

I have what I would consider a simple css layout.

wrapper
menu
content on the right
footer


What is the bug fix to stop IE from making my content area too big that it ends up way down the page (when it's supposed to be top-right (next to the left menu area).

Or do I need to provide my ugly scripting so you can figure out what I'm on about? (it really is ugly because i just validated it and ended up with a stack of extra code). Basically, old versions of IE are displaying the page stretched and yet it works fine in IE 7 and seems fine in all other browsers.

Eternal_Howl
11-26-2007, 09:57 AM
I've been doing heaps of reading on my issue and I came across this. I'm a bit stuffed to be playing with it tonight, but here's the link I found on the Tan Hack (http://www.communitymx.com/content/article.cfm?page=2&cid=E0989953B6F20B41) (never heard of it before)

I'll have a go with it tomorrow and see if it helps. Until I started trying to learn CSS, I didn't realise what a pig IE was.

Eternal_Howl
11-26-2007, 05:19 PM
<link href="vmenu.css" type="text/css" rel="stylesheet">
<style type="text/css">
body {word-wrap: break-word;}
input.c3 {color: black; font-family: verdana; font-size: 8pt; font-weight: bold; background-color: white;}
span.c2 {color: #FFFFFF; font-family: Garamond; font-size: 80%}
div.c1 {text-align: center}
#wrapper {
width:90%;
position: relative;

}

#content {
width: 65%;
float: right;


}


#menusection {
width: 20%;
float: left;
text-decoration:none;


}

#footer {
font-size:8pt;
line-height:9pt;
font-family:verdana;
font-weight:normal;
clear:both;
float:right;
width:65%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="menusection"><img src="/cha1.jpg" width="255" height="200" alt="Chaos"> <script language='JavaScript' src="/vmenu.js" type="text/javascript">
</script> <noscript>Your browser does not support JavaScript!</noscript></div>
<div id="content">
<div class="c1"><img src="/cha2.jpg" alt="Chaos Designs"></div>
<br>
<div class="c1"><img src="/images/4etchers.jpg" alt="Ravenous"></div>
<br>
<br>
<div class="c1">Ravenous' expertise spans over two decades. Utilising a variety of mediums including: granite, paints, pencils, charcoals, ink pens, metals, mirror, glass, skin and tile; he has the skill and imagination to craft a masterpiece or monument which is second to none. His artistic incline stems from the sheer love of creation and the desire to bring concepts and visions to life. Pictured above, he is working on one of his <a href="/monuments6.html">creations</a></div>
<br>
<br>
<br>
<br>
<center>
<img src="/images/blackbar.gif" width="317" height="18" alt=""><br>
<a href="/view.html">View</a> / <a href="sign.html">Sign</a> Guestbook<br>
<img src="images/blackbar.gif" width="317" height="18" alt=""><br>
<br>
<table border="1" cellpadding="1" cellspacing="1" width="300">
<tr>
<td>
<form method="post" action="http://www.bfnsoftware.com/cgi-bin/home/Members/MailList/MailList.cgi"><input type="hidden" name="User" value="26083"> <input type="hidden" name="List" value="1743">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#000000" width="280">
<tr>
<td width="280" height="10" bgcolor="#000000" align="center"><span class="c2"><strong>Be notified of updates</strong></span></td>
</tr>
<tr>
<td width="280" height="20" bgcolor="#000000">
<table border="0" cellpadding="1" cellspacing="1" width="280">
<tr>
<td width="280" align="left"><span class="c2"><strong>E-Mail:</strong></span> <input type="text" name="Email" value="" size="22"><br></td>
</tr>
<tr>
<td width="280" align="center"><input type="submit" value="Subscribe" class="c3"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<br>
<br><center>This site is in the process of being relocated to this webserver and therefore some of
the links won't work yet. The site is still up and running at <a href="http://chaosdesigns.110mb.com/index.html" target="new">http://chaosdesigns.110mb.com</a> if you wish to view all Ravenous' artwork. - Webmistress Sun Nov 25th</center>
<br>
<br>
<br>
<br>
<br>
<BR>
<BR>
</center></div>
<div class="c1" id="footer">All images &copy;Copyright 2007 Ravenous (Chaos Designs).<br>
No graphics, photographs or concepts are to be reproduced without express permission of the artist.</div>
</div>


I know my combination of css and tables will be frowned upon by the CSS gurus here, but I'm learning and i haven't got the time right now to apply another means - however, I have validated this page (with meta tags etc).

In IE 5.5 & 6 it displays the content way down the page and it should be at the top.

Eternal_Howl
11-27-2007, 07:50 AM
I find hacks and either they don't work, or I'm not implementing them properly. HELP? I swear this is driving me nuts.

Eternal_Howl
11-27-2007, 08:05 AM
http://www.ravenouspathogen.com/ie6.png

See my problem? But it renders correctly in all other browsers except IE6 and IE 5.5

BLiZZaRD
11-27-2007, 02:15 PM
/* Hide from IE5-Mac \*/
#content
{
float: none
}
/* End hide */

hexkrypt0r
11-27-2007, 02:29 PM
http://www.ravenouspathogen.com/ie6.png

See my problem? But it renders correctly in all other browsers except IE6 and IE 5.5
I'd love to help but for now i have no idea of how to fix it.
BTW i am using a script which displays banners in my web site, it works good in IE 6 or lower but does not displya any images when viewed with IE7
Any suggestions?
Hexkrypt0r

Eternal_Howl
11-27-2007, 05:12 PM
Thanks for your response Blizzard, I will try that.

Eternal_Howl
11-27-2007, 05:38 PM
I'd love to help but for now i have no idea of how to fix it.
BTW i am using a script which displays banners in my web site, it works good in IE 6 or lower but does not displya any images when viewed with IE7
Any suggestions?
Hexkrypt0r

I'm not sure if this sounds like your problem, but if you haven't already read it: http://dynamicdrive.com/forums/showthread.php?t=26858

From what I've been reading about anything lower than IE 7, IE 6 is running in quirks mode and I think IE5.5 is as well. That probably doesn't mean anything to you, but basically, with the hassles I've been having with my layout, I have determined that if it looks fine in IE5.5 or 6 then it probably sucks in IE 7 and vise versa. IE has some issues that have been resolved or fixed that weren't in the older browsers. IE doesn't obey the accepted web standards apparently, which gives people like you and me a headache. The script you are using for your banner, is it a PHP script? I would suggest you post your scripting on to a new thread so it gets full attention and someone can take a look at it.

Eternal_Howl
11-28-2007, 07:06 AM
/* Hide from IE5-Mac \*/
#content
{
float: none
}
/* End hide */


Hi Blizzard,

I have tried using this but it didn't seem to work for me.

Is it wrong to use percentages as opposed to specifying pixels in your divs? I mean I would have thought it would render better for more screen resolutions.

BLiZZaRD
11-28-2007, 05:27 PM
instead of floating your divs, you could do display:inline; inside the wrapper div then all things there would be a block display (divs are block elements, of course) and inline. Not sure if that will help or not.

After my other projects I can take a better look.

Eternal_Howl
11-29-2007, 04:25 AM
It worked for IE 6, but IE 5.5 and 5.01 still display the stretch. However, this is progress - it's now displaying correctly in IE6. It's a good start. I'm not worried about 5.01 but being able to fix it for IE5.5 would be great. I'll keep trying.

BLiZZaRD
11-30-2007, 01:16 AM
Well, if one hunch was right, le's shoot for two in a row...

add this under the display:inline;



float:none !important;


Heh...

Or, trying the !important to the inline:



display:inline !important;


Good Luck.

Eternal_Howl
11-30-2007, 03:47 AM
Will give it a shot and get back to you. I did read about this tag but because all my other efforts (before you saved me) didn't seem to yield a result, I guess I was becoming disillusioned.

Eternal_Howl
11-30-2007, 01:10 PM
I can't believe it, but, after I included the important! tag and applied "min-width" attribute to my wrapper, and changed my font size to percentages, it now displays properly ALMOST properly in all browsers. The only thing is that the background for my menu caption buttons display an extended background colour outside the dimensions of the navigation menu - but that's a linked stylesheet and will try and apply min-width attribute to see if that fixes it. Your input has definitely stopped me pulling all my hair out :) I've been trying to solve the problem for the best part of a week.


<style type="text/css">
body {word-wrap: break-word;}
input.c3 {color: black; font-family: verdana; font-size: 8pt; font-weight: bold; background-color: white;}
span.c2 {color: #FFFFFF; font-family: Garamond; font-size: 80%}
div.c1 {text-align: center}
}
#wrapper {
min-width:85%;
position: relative;
display:inline !important;

}

#content {
width: 65%;
float: right;

}


#menusection {
width: 20%;
float: left;
text-decoration:none;
display: inline;

}

#footer {
font-size:70%;
line-height:9pt;
font-family:verdana;
font-weight:normal;
clear:both;
float:right;
width:65%;

}
</style>

</head>

Now, the only thing I have to figure out is how to get the footer in-line with the content (without making it part of the content).

Eternal_Howl
11-30-2007, 03:32 PM
Okay, I've now tested it on 800px resolution and it's now giving me that ugly page stretch again on IE 6 and below. Any ideas how I can overcome this?

BLiZZaRD
12-01-2007, 04:24 PM
I am sure you have seen a lot of pages in the course of trying to get this to work, but have a look at this one (http://www.sitepoint.com/article/browser-specific-css-hacks) Even if you have seen it before, look again, as the information may be more understandable to you now. :)

Eternal_Howl
12-03-2007, 07:37 AM
Thanks,
I had a look at that and another article on the site.
Yesterday when I was playing around with something else, I found something in someone else's style sheet and noticing this made me realise, there must be away to specify attributes when a certain resolution is detected...but the question next is how to implement it.



#pagewidth-800{
width:770px;
}
#pagewidth-1024{
width:970px;
}

Eternal_Howl
12-03-2007, 09:12 AM
I've been doing some more reading and while I was reading, it dawned on me that one of my images at the top of the page is about 630 wide - now, on an 800 x600 it means that my total page width would be wider than 800 regardless of min-width attributes. Am I correct in that assumption?

How then would I define how wide an image, (or series of images in a row) is allowed to be at its maximum width - so that it would then display correctly in all resolutions?

Arrrghh the ire of learning css...there are so many things to consider...but I want to get it right.

Eternal_Howl
12-04-2007, 08:22 AM
Progress report haha:

None yet, but I have come to determine that my problem is probably the width of the images and/or the amount of images displayed in a row.

See, the other issue I have is that I had to do away with my old computer, which was showing at 800 x 600 for optimum resolution and was a standard monitor. This laptop is a widescreen and no doubt not the most ideal thing to be using to design pages as it doesn't show me the problems regular screens reveal. I'm also looking at articles on fluid layouts that resize depending on the window.

So I'm going to do some more reading to find out if I can resize an image to fit the resolution to fit the content, rather than just resizing the image, period. If the latter must be, then I lose the look I wish to obtain on a higher resolution. Hope that makes sense.

If you've got any constructive tips/advice, that would be cool. I've come too far to step back into pure html, so I simply have to perservere ...

BLiZZaRD
12-04-2007, 06:07 PM
See the page I linked to about my image tutorial I wrote Here (http://outsidetheurl.com/FrozenCoyoteLabs/Codes/cssmenu.html)

Look at the 4th text box from the top and the explanation under it, there you will see about declaring width for the div, and how to incorporate it. Wish I had more tuts to show you, but I haven't finished them yet.

Eternal_Howl
12-07-2007, 07:00 AM
I like the hieroglyphs. I do want to know who dislaimer is though ;)

I think I solved my problems - most of them. Now it's the next hardest part. Working out the uls or lis or whatever for lining up 3 images in a row (no I'm not doing a nav bar, that's done). (You know, like a table with one row). I have a feeling the answer is on that page.

Eternal_Howl
12-07-2007, 09:00 AM
http://www.ravenouspathogen.com/currenttest.html (Current Test Page)

Have a look at the full colour image (or color for you American folk ;)) It's displayed in between the two green and frosted glass images. - I know, I have a lot of images.....and if you're on 14k dialup I don't recommend checking it out.

When I had it in tables, the image was perfectly centred top/bottom/left/right between the other two images. Obviously, the middle image is not the same size as the two on either side of it. Without resizing it, how can I adjust the position of the image so it is perfectly centred height-wise between the images on either side and will remain centered regardless of browser or resolution? (Am I making any sense? - Nah never!)




<li><a href="/images/300greenleft.jpg" rel="thumbnail"><img src="/images/183greenleft.jpg" class="c6" border="0" alt=""></a>
<a href="/images/380glassetchraecolour.jpg" rel="thumbnail"><img src="/images/183glassetchraecolor.jpg" class="c7" border="0" alt=""></a>
<a href="/images/300greenright.jpg" rel="thumbnail"><img src="/images/183greenright.jpg" class="c6" border="0" alt=""></a></li>
<br>


The class just pertains to the dimensions of the images and not the positioning as such.

BLiZZaRD
12-09-2007, 08:05 PM
Well you could make 4 divs.. a container dive to house all of them, setting the width to a specific px or %, then have each other photo in a div of its own, display:inline !important; so they remain next to each other, and center them in the container div just so.

Hope that gives you inspiration ;)

Eternal_Howl
12-11-2007, 07:10 AM
Thanks Blizzard.

I'll give it a shot. At the moment, I'm just tweaking the rest of it to make sure it's IE & FF friendly.

I found some scripting errors that IE corrected, but FF did not and it wasn't until I saw them in FF that I noticed where I'd screwed up. I wish IE would just display it as it's meant to be so that instead of correcting mistakes, it helps correct the author ...