Need some help from one of you CSS Guru's out there ;-)

vervecreativedesign · #1 Jul 24th, 2006, 17:59

Hi all!

OK, so I designed this really nifty (at least I thought it was) page for a client that resizes vertically and horizontally to fit the browser window using CSS.

Now, of course it works in Firefox and Safari, and of course it does not work in IE. So.... I'm wondering if any of you may be able to take a look at it and see what you think the problem may be with my css.

Here's the page:
http://www.powerxchange.com/newpx/

Look at it in Firefox or similar browser first.

Thanks a million!

Nate M.

moojoo · #2 Jul 24th, 2006, 18:11

It wouldn't load. Alternately could you post a screenshot of it in FF and one of it in IE? May be able to tell tyou just by looking at it.

Legacy_Staff · #3 Jul 24th, 2006, 18:47

Loads in mine.
In IE6 it appears to load to the left of the screen and doesn't reach the right of the screen or the bottom although the images that do appear, seem to be the same sizes.
Might wanna post the code as well.

vervecreativedesign · #4 Jul 24th, 2006, 19:24

Hi Guys!

Thanks for replying!

Here is my code, the bar on the top and the bottom and left side are repeating images.

Thanks for your help!

Code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>PowerXChange.com</title>
<style type="text/css">
<!--
#main {
    position:absolute;
    width:100%;
    min-width: 800px;
    min-height: 600px;
    height:100%;
    z-index:1;
    top: 0px;
    left: 0px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height:12px;
}
 
#banner {
    position:absolute;
    background: url(images/bannerpic.gif) no-repeat;
    width:360px;
    height:102px;
    z-index:2;
    top: 0px;
    left: 0px;
}
#sidebg1 {
    position:absolute;
    background: url(images/sidepic2.gif) no-repeat;
    width:206px;
    height:216px;
    z-index:2;
    top: 102px;
    left: 0px;
}
#sidebg2 {
    position:absolute;
    background:url(images/sidepic.gif) repeat-y;
    width:200px;
    height:100%;
    z-index:1;
    top: 0px;
    left: 0px;
}
#topbg {
    position:absolute;
    background:url(images/headerpic.gif) repeat-x;
    width: 100%;
    height:102px;
    z-index:1;
    left: 0px;
    top: 0px;
}
#newsfeed {
    position:absolute;
    background:none;
    width: 217px;
    height:69px;
    z-index:5;
    right: 0px;
    top: 18px;
}
#nav {
    position:absolute;
    width:200px;
    height:115px;
    z-index:6;
    top: 93px;
    left: 6px;
}
 
#footer {
    position:absolute;
    background:url(images/footerpic.gif) repeat-x;
    bottom: 0px;
    width:100%;
    height:63px;
    z-index:7;
}
#Layer1 {
    position:absolute;
    width:400px;
    height:45px;
    z-index:8;
    left: 10px;
    bottom: 0px;
}
 
.style3 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
}
.style4 {
    font-size: 14px;
    line-height: 16px;
    color:#FFFFFF;
}
.style5 {
    font-size: 10px;
    line-height: 12px;
}
 
-->
</style>
</head>
 
<body>
 
<div id="main">
    <div id="banner"><a href="http://www.powerxchange.com"><img src="images/clear.gif" alt="PowerXChange" width="358" height="73" border="0" /></a> </div>
    <div id="newsfeed">
        <div align="right"><span class="style3">Today's News&nbsp;&nbsp; </span>
        </div>
        <iframe src="http://www.powerxchange.com/rss2html.php?XMLFILE=http://www.powerxchange.com/thepxfeed.xml&TEMPLATE=http://www.powerxchange.com/thepxfeedhome.html&MAXITEMS=1" height="auto" width="210px" frameborder="0" allowtransparency="true"></iframe>
</div>
 
 
 
    <div class="style4" id="nav">
        Extensions Newsletter<br />
        <br />
        Product Archive<br />
        <br />
        Press Releases<br />
        <br />
        Developers<br />
        <br />
        Products<br />
        <br />
        Manuals<br />
        <br />
    </div>
 
 
    <div id="sidebg1"> </div>
    <div id="sidebg2"> </div>
    <div id="topbg"> </div>
 
 
 
 
<div id="Layer1">
    <span class="style5">&copy;2006 ThePowerXChange, LLC All Right Reserved<br />
    All other trademarks are the property of their respective owners.</span>
</div>
 
 
<div id="footer"> </div>
</div>
 
</body>
</html>

craig · #5 Jul 25th, 2006, 08:20

Not sure of a work around, but its the z-index, min heigh and width that IE doesnt understand or implement.

vervecreativedesign · #6 Jul 25th, 2006, 14:41

Thanks!

Yeah, I figured the min height and min width in IE thing out after posting this, unfortunately, I still can't seem to find a work around for it.....

mreine · #7 Jul 26th, 2006, 00:26

I messed with this last night and had it figured it, but wasn't satisfied with the coding just yet. If you are definately wanting to use this layout I can probably get you going. I'll mess with it again tonight.

vervecreativedesign · #8 Jul 26th, 2006, 14:44

You have no idea how much help that would be!

Greatly appreciated!

What was it that got it working?

Thanks again!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Calling all CSS guru's!	csa	Web Page Design	6	Mar 8th, 2006 08:28

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Need some help from one of you CSS Guru's out there ;-)