Learn VBA & Macros in 1 Week!

CSS - Page Wrapper Disappears In Ie, Works In Everything Else

Full Excel VBA Course - Beginner to Expert

Page Wrapper Disappears In Ie, Works In Everything Else	View Content

Originally it worked in IE, but nothing else, now we've gotten it to work in FF, Safari, Opera, et. al., but the page wrapper background disappears in MSIE 7.

http://www.splatteredink.com/realms/

CSS:
Code:

#overall {
background: #ababab url(../images/wrapper_bg.png)100% 0 repeat-y;
width: 100%;
min-height: 335px;
float: right;
}

any ideas?

Full Excel VBA Course - Beginner to Expert

Ie 6 Vert Scrollbar Disappears - No Bug Fix Works So Far

Similar Tutorials

View Content

In IE6, the vertical scrollbar disappears if the browser window is opened vertically past the <div id="text intro"> section (if the bottom of the browser window is within or above this section, the scroll bar is present). The scrollbar is present as normal in FF and Safari. So this is apparently an IE issue.

I've tried a couple of fixes to seemingly related bugs, such as adding the line "display:inline;" to both of my floating elements. I also tried the Holly Hack fix of adding "height:1%" to my relatively positioned element, "body". The scrollbar behavior remains the same.

The following are my .php and .css files. Any ideas on this would be much appreciated... thanks.

PHP Code:
<!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" />
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<title>Title</title>
<body>
<div id="container">
<div id="address">Address</strong></div>
<div id="banner">Banner<div id="logo"></div>
<div id="redseethru" class="redseethru"></div>
<div class="redseethru" id="links"></div>
  <div id="link1">Link</div>
  <div id="link2">Link</div>
  <div id="link3">Link</div>
  <div id="link4">Link</div>
  <div id="link5">Link</div>
</div>
<div id="breadcrumbs">Script
</div>
<div id="red_title">Products</div>
<div id="title">Kayaks</div>
<div id="body">
<div id="text_intro">Text</div>
<p>ipsum lorem</p>
<p>ipsum lorem</p>
<p>ipsum lorem</p>
<p>ipsum lorem</p>
</div>
<div class="redseethru" id="footer"></div>
<div id="copyright">Copyright</div>
<div id="silver">Design</div>
</div>
</body>
</html>

CSS:
PHP Code:
/* CSS Document */

#container {
    position:absolute;
    width:750px;
    left:50%;
    margin-left:-350px;
    }
#address {
    position:absolute;
    width:615px;
    height:12px;
    z-index:10;
    left: 165px;
    top: 0px;
    font-family: Arial;
    font-size: 11px;
    color: #FFFFFF;
    padding-top: 1px;
    padding-bottom: 1px;
}
#banner {
    position:absolute;
    width:750px;
    height:125px;
    z-index:1;
    left: 0px;
    top: 50px;
    background-image: url(http://www.sportingrage.com/js/banner_images.js);
    border: 2px solid #CF1C0D;
}
#logo {
    position:absolute;
    width:285px;
    height:150px;
    z-index:2;
    left: -40px;
    top: -49px;
    visibility: visible;
    background-image: url(http://www.sportingrage.com/images/TSR_white_SML.png);
}
img, #logo { behavior: url(http://www.sportingrage.com/iepngfix.htc); }
body {
    background-color: #000033;
}
.redseethru {
    position:absolute;
    width:150px;
    height:100px;
    z-index:3;
    left: 602px;
    top: 0px;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://www.sportingrage.com/images/redseethru.png');

}
.redseethru[class] {
    background-image: url(http://www.sportingrage.com/images/redseethru.png);
}
#red_title {
    position:absolute;
    width:145px;
    height:25px;
    z-index:10;
    left: 598px;
    top: 120px;
    text-align: right;
    font-family: Arial;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
}
#links {
    position:absolute;
    width:750px;
    height:25px;
    z-index:5;
    left: 0px;
    top: 100px;
    border-top: 1px solid #CF1C0D;
}
#link1 {
    position:absolute;
    width:74px;
    height:15px;
    z-index:10;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 5px;
    left:2px;
    text-align: center;
    border-right: 1px solid #CF1C0D;
    top:100px;
}
#link2 {
    position:absolute;
    width:74px;
    height:15px;
    z-index:10;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 5px;
    left: 87px;
    text-align: center;
    border-right: 1px solid #CF1C0D;
    top:100px;
}
#link3 {
    position:absolute;
    width:74px;
    height:15px;
    z-index:10;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 5px;
    left: 172px;
    text-align: center;
    border-right: 1px solid #CF1C0D;
    top:100px;
}
#link4 {
    position:absolute;
    width:74px;
    height:15px;
    z-index:10;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 5px;
    left: 258px;
    text-align: center;
    border-right: 1px solid #CF1C0D;
    top:100px;
}
#link5 {
    position:absolute;
    width:74px;
    height:15px;
    z-index:10;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 5px;
    left: 342px;
    text-align: center;
    border-right: 1px solid #CF1C0D;
    top:100px;
}

/*White Links*/
a.white:link {
    font-family: Arial;
    color: #ffffff;
    text-decoration: none;
}

a.white:visited {
    font-family: Arial;
    color: #ffffff;
    text-decoration: none;
}
a.white:hover {
    font-family: Arial;
    color: #ffffff;
    text-decoration: underline;
}

#breadcrumbs {
    position:absolute;
    width:730px;
    height:20px;
    z-index:1;
    font-family: Arial;
    font-size: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 5px;
    padding-top: 10px;
    left: 0px;
    top:179px;
    background-color: #FFFFFF;
    border-right-width: 2px;
    border-left-width: 2px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #FF0000;
    border-left-color: #FF0000;
    text-indent: 7px;
}

a.breadcrumbs:link          {
    color:#000033;
    text-decoration:underline;
    font-weight: normal;
    font-family: Arial;
    font-size: 10px;
}
a.breadcrumbs:visited       {
    color:#000033;
    text-decoration:underline;
    font-weight: normal;
    font-family: Arial;
    font-size: 10px;
}
a.breadcrumbs:hover         {
    color:#000033;
    text-decoration:underline;
    font-weight: normal;
    font-family: Arial;
    font-size: 10px;
}
#title {
    position:absolute;
    width:740px;
    height:20px;
    z-index:1;
    font-family: Arial;
    font-size: 20px;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 10px;
    left: 0px;
    color: #000033;
    font-weight: bold;
    text-align: left;
    padding-bottom: 5px;
    top: 214px;
    background-color: #FFFFFF;
    text-indent: 10px;
    border-right-width: 2px;
    border-left-width: 2px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #FF0000;
    border-left-color: #FF0000;
}
#body {
    position:relative;
    width:730px;
    height:1%;
    z-index:6;
    left: 0px;
    top: 249px;
    background-color: #FFFFFF;
    border-top: 2px none #CF1C0D;
    border-right: 2px solid #CF1C0D;
    border-bottom: 2px solid #CF1C0D;
    border-left: 2px solid #CF1C0D;
    padding: 10px;
}

#text_intro {
    position:relative;
    width:650px;
    height:50px;
    z-index:10;
    font-family: Arial;
    font-size: 12px;
    padding-right: 40px;
    padding-left: 40px;
    padding-top: 10px;
    left: 10px;
    color: #000033;
    text-align: left;
    padding-bottom: 5px;
    top: 10px;
}
#footer {
    position:relative;
    width:750px;
    height:20px;
    z-index:4;
    left: 0px;
    top: 249px;
    border-top: 2px none #CF1C0D;
    border-right: 2px solid #CF1C0D;
    border-bottom: 2px solid #CF1C0D;
    border-left: 2px solid #CF1C0D;
    padding-top: 5px;
}
#copyright {
    position:relative;
    float:left;
    top:249px;
    width:200px;
    height:25px;
    z-index:17;
    font-family: Arial;
    font-size: 11px;
    color: #FFFFFF;
    display:inline;
}
#silver {
    position:relative;
    float:right;
    width:200px;
    height:25px;
    z-index:7;
    top: 249px;
    font-family: Arial;
    font-size: 11px;
    color: #FFFFFF;
    display:inline;
}

Page Disappears In Ie7! Help!

Similar Tutorials

View Content

Ok i have a problem with css in IE7(figures!)... Dont know if i need a hack for it or i just suck at css but when i load my page in firefox everything is perfect but when i load it in IE7 there is nothing! I figured out it is because of im using a clear and if i dont use the clear it shows up but of course it doesnt look right.

html4strict Code:
Original - html4strict Code <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="main"> <div id="header"> <div class="logo"> <img src="images/Logo beta2.jpg" alt="Logo" /> </div> <div class="top-section"> </div> <div class="top-border"> </div> </div> </div> </div> </body> </html>

  

 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head>  <body>


 <div id="container">


  


 <div id="main"> 


  


 <div id="header">


  


 <div class="logo">   <img src="images/Logo beta2.jpg" alt="Logo" />


  


 </div>


  


 <div class="top-section">


  


 </div>


  


 <div class="top-border">


  


 </div>


 </div>


 </div> 


 </div>


 </body>


 </html>

CSS:
css Code:
Original - css Code @charset "utf-8"; #container { height: auto; width: auto; padding: 10px; visibility: visible; overflow: auto; } * html #container { height: 1%; } #main { position: relative; } #header { height: auto; width: auto; position: relative; } .top-border { height: 10px; width: 900px; position: relative; background-image: url(css-images/t-border.jpg); background-repeat: no-repeat; clear: left; } .logo { float: left; position: relative; } .top-section { float: left; height: 120px; width: 600px; position: relative; }

  

 @charset "utf-8"; 


  


 #container {    height: auto;  width: auto;     padding: 10px;  visibility: visible;     overflow: auto;  } 


  


 * html #container {     height: 1%; } 


  


 #main {     position: relative; } 


  


 #header {   height: auto;     width: auto;    position: relative; } 


  


 .top-border {   height: 10px;     width: 900px;   position: relative;   background-image: url(css-images/t-border.jpg);   background-repeat: no-repeat;     clear: left; } 


  


 .logo {     float: left;    position: relative; }


  


 .top-section {  float: left;     height: 120px;  width: 600px;    position: relative; }

Page Works In Ff, Almost Blank In Ie?

Similar Tutorials

View Content

cookcommons . com / index_working . html

At this location, I have a page that I validated the code, but most of it is hidden in both IE 6 and IE7? Seems to work fine in FF?

Thanks for the help in advance.

Help! Page Works Fine With Ie/chrom, But Not With Ff...

Similar Tutorials

View Content

(The relevant subset of my) website is he
http://www.smoli.com

(URL address blocked: See forum rules)

It was designed using FrontPage 2003 (I know, I know - but it was a long time ago and it was the only thing I had access to at the time...).

Everything works fine in:
- Preview from within FP.
- IE8 and IE9
- Latest version of Chrome.

But not with Firefox (latest version).

Problem is that the table doesn't seem to resize to the screen size, and the scrolling of the logos at the bottom are "all over the place".

I am pretty new to CSS, and the code the scrolling logos was inserted as is from (URL address blocked: See forum rules)

Any idea what is causing the incompatibility?

Many thanks.

Problem Viewing My Page In Firefox, Works In Ie Fine.. Help :(

Similar Tutorials

View Content

if you take a look at http://www.cherrysociety.com/mag/art/

you'll see it works fine in IE, but when it is viewed in firefox it's so messed up. can anyone help me? tell me what i've done wrong?

the css is at http://www.cherrysociety.com/mag/style.css

thanks guys, i appreciate it a lot.

Stupid Ie! Page Goes Out Of Control; Works Fine In Safari And Firefox [help!]

Similar Tutorials

View Content

I just finished an element for a redesign of my website. I open it in Firefox, working. I open it in Safari (for Windows), fine. I open it in IE, I almost cry.

My entire page is screwed up! I can't tell if it's the floats, the margins, the lists (I think it's the lists).

Anyways, does anyone know whats wrong so I could fix it?

http://www.politinks.com/topbar

Any help would be appreciated. Thanks!

Page Wont Display Correctly In Ie7 Or Older. But Works Fine In Chrome, Safari, Ie8, F

Similar Tutorials

View Content

Wrapper Help

Similar Tutorials

View Content

Hi, My website is deployed at www.wecook.co.uk and i'm having problems with the gray background - i want it to be at least as long as the users page(without specifying a height) - how can i do this?

the stylesheet can be seen at www.wecook.co.uk/wecook/wecook.css

Any help is appreciated.

Thanks

Wrapper Div Tag

Similar Tutorials

View Content

in Dreamweaver, how do I change alignment of e.g subNavColumn div tag within wrapper Div Tag, I wish to align subNavColumn on left of page. Banner and NavBar extend across full page. I have been unable highlight layer to change properties, must a CSS Stylesheet be attached at outset, could this be part of my problem. Also how can I remove gap showing between layers in IE.
I wish to contain all div tags together, Would appreciate help.

Issue With Wrapper Div

Similar Tutorials

View Content

I just noticed an issue I'm having related to the content on almost all the pages on my site. I have the code below for the body and the #page div. The #page div is supposed to be like a wrapper that encompasses everything. I just tried putting in a border (border: 1px solid #FFFF00 for the #page div so I could see how everything lined up within it (since I have the same background-color for the body and the #page div I can't normally see this). When I added this yellow border, I found only one page where the border went around everything. On all the other pages, the border seems to either not close or to only go around the content near the top of the page or to go around nothing. I think this means that all the code that I have in the #page div is not being applied to most of the content on each of those pages. I'm having a hard time understanding why that border I inserted does not go all the way around everything (why the #page div does not seem to be including everything). I have the div properly closed at the bottom of the page (</div></body></html>) and this is even happening on pages where I have no validation errors.

body {
background-color: #000000;
margin: 0px;
}

#page {
width: 960px;
font-size: 14px;
font-family: verdana, sans-serif;
color: #26D578;
background-color: #000000;
margin-left: auto;
margin-right: auto;
margin-top: 16px;
}

Right Border Disappears!

Similar Tutorials

View Content

The right hand border for some of my table cells (Class "item_body") disappears, but they have almost identical coding to the cells the work properly. My CSS that pertains to the borders:
Code:

td.item_body {background-color: #e7e7e7; border-left: 1px solid #c6c6c6; border-right: 1px solid #c6c6c6; border-bottom: 1px solid #c6c6c6; margin: 5px 5px 5px 5px}

And the code for the table with the cell that doesn't work:
Code:

<table cellspacing='0' cellpadding='0' border='0' valign='middle' width='100%'>
	<tr height='22px'>
	<td class='item_title' width='100%'><p class='title'>
Search Roster
	</p></td>
	</tr>
	<tr>
	<td class='item_body' width='100%'><p class='item_body'>
Use this form to search for any Bronco Virtual Airlines pilot.  You may use as many or as little fields as you would like.  For best results, try to enter all the information you know.
<form action="index.php" method='get'>
<input type='hidden' name='page' value='roster' />
<input type='hidden' name='act' value='shw' />
<table cellspacing='0' cellpadding='2' border='0' width='100%'>
<tr><td width=50%><p class='item_body'>Full Name:</p></td>
<td><p class='item_body'><input type='input' name="name" /></p></td></tr>
<tr><td><p class='item_body'>Pilot ID</p></td>
<td><p class='item_body'><input type='input' name="pilotid" /></p></td></tr>
<tr><td><p class='item_body'>Pilot Base:</p></td>
<td><p class='item_body'><select name="base">
<option selected='selected' value='' />Any Base
<option value='kboi' />KBOI
<option value='kgtf' />KGTF
<option value='ksea' />KSEA
<option value='kslc' />KSLC
</select></p></td></tr>

</table><br /><p class='item_body_center'><input type='hidden' name='orderby' value='last' /><input type='submit' value="Search"></form>
	</p></td>
	</tr>
</table>

Wrapper Getting Broken

Similar Tutorials

View Content

For some reason my sidebar keeps breaking the wrapper and floating under my content on my blog page.

universitysquarecondos. com / owners-2 / updates/

Sorry about wack url but it wont let me post urls since it thinks I may be spamming or something...

Note that this only happens in IE, not in Mozilla (of course... )

Any ideas?

Thanks for helping a noob get his sealegs,

Reid

Wrapper & Div Heights

Similar Tutorials

View Content

Hi,

I'm new to the forum and very new to CSS, so please excuse my ignorance or any stupid fundamental mistakes I have made.

I have almost got what I need to work, but my wrapper and the leftshade and rightshade div heights will not work with the height of the page. If I set them to a preset pixel height, they're fine, but when I set them to auto they disappear. I need them to be able to scroll to whatever the length of my content is going to be.

I could really use some advice on how to sort this. Many thanks in advance.

Code:


<!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=utf-8" />
<title>Heading</title>
<style type="text/css">
<!--

body {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
	background-color: #C2FFC1;
}
#wrapper {
	width:960px;
	height:auto;
	margin-right: auto;
	margin-left: auto;
}
#middle {
	position:relative;
	top:0px;
	width:940px;
	height:auto;
	float: left;
	background-color: #FFFFFF;
}
#leftshade {
	top:0px;
	width:10px;
	height:600px;
	float: left;
	background-image: url(images/shadeleft.png);
	background-repeat: repeat-y;
}
#rightshade {
	top:0px;
	width:10px;
	height:600px;
	float: left;
	position: relative;
	background-image: url(images/shaderight.png);
	background-repeat: repeat-y;
}
#banner {
	width:940px;
	height:150px;
	background-color: #FFFFFF;
}
#navbar {
	width:940px;
	height:50px;
	background-color: #6DC072;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #666666;
	border-bottom-color: #666666;
	text-align: left;
	vertical-align: middle;
}
}
#centre {
	position:relative;
	width:580px;
	height:257px;
	padding: 10px;
	float: left;
}
#content {
	width:940px;
	height:auto;
	background-color: #FFFFFF;
}
#contentleft {
	position:relative;
	width:150px;
	height:auto;
	float: left;
	padding: 10px;
}
#contentmiddle {
	position:relative;
	width:580px;
	height:auto;
	padding: 10px;
	float: left;
}
#contentright {
	position:relative;
	width:150px;
	height:auto;
	float: right;
	padding: 10px;
}
-->
</style>
</head>

<body>



<div id="wrapper">
  <div id="leftshade"></div>
  <div id="middle">
    <div id="banner"></div>
    <div id="navbar"></div>
    <div id="content">
      <div id="contentleft">
        <p>f</p>
      </div>
      <div id="contentmiddle">
        <p>&nbsp;</p>
      </div>
      <div id="contentright">
        <p>&nbsp;</p>
      </div>

    </div>

  </div>
  <div id="rightshade"></div>
</div>
</div>
</body>
</html>

Calendar Disappears In Ie

Similar Tutorials

View Content

Footer Within Wrapper Div.

Similar Tutorials

View Content

Hello all,

I've looked all over the place but cannot seem to find anywhere that explains how to add a footer to a CSS page.

Basically i have a wrapper div, which is set to 100%, and within this I'd like a footer which would be alligned to the bottom of the wrapper. I just cannot seem to do it.

Would it be a case of creating a new box, and having it aligned to 'bottom'?

Using A Wrapper And Resizing And Such?

Similar Tutorials

View Content

I'm looking to basically replicate the design of Engadget. Not entirely, just the real basic design of it. I'm trying to figure out how to use 4 different images (a right header, left header, left footer, right footer) to construct a site that resizes in different browsers to look good. How do I do this? I'm familiar with CSS and html. I want to make the images in Fireworks and slice them, but after I do that and have the html how do I do things like using a wrapper?
Thanks for any help you can offer.

Wrapper Div On Its Own Program

Similar Tutorials

View Content

Background Disappears

Similar Tutorials

View Content

Hi, the background of the top navigation (it's a drop down menu) disappears when I make the google custom search box float left. I need it to float left because I want it to be on the same line as the top navigation menu.

The id of the div that should show the bg is #topNavContainer.

Page: http://hopewwamericorps.org/index.php

Style:
PHP Code:
#topNavContainer
{
background: #000000 url(../images/topNavBg.gif) repeat-x scroll;
}

#topNav
{
height: 40px;
width: 760px;
margin: 0px auto;
text-align: left;
padding: 0px 0px 0px 100px;
color: #bcd5df;
float:left;
}

#siteSearch
{
padding-top: 10px;
width: 300px;
float: left;
display: block;
}

HTML:
PHP Code:
<div id="topNavContainer">
        <div id="topNav">
            <ul class="sf-menu">
                -**REMOVED FOR POST**-
            </ul>
        </div>
        <div id="siteSearch">
            <form action="http://hopewwamericorps.org/page.php?Page=Search_Results">
                <input type="hidden" name="cx" value="018067663729731490355:_3djw8ivavo" />
                <input type="hidden" name="cof" value="FORID:10" />
                <input type="hidden" name="ie" value="UTF-8" />
                <input type="hidden" name="Page" value="Search_Results" />
                <input type="text" name="q" size="31" />
                <input type="submit" name="sa" value="Search" />
            </form>
            <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
        </div>

    </div>

Thank you for your help!

Please ask me to clarify if needed, thanks.

Wrapper Div Nudged Over

Similar Tutorials

View Content

Wondering if anyone could help me root this problem out. I find that when content forces a scrollbar on the browser window, everything in my wrapper div gets nudged to the left about 10 px. I'm using a sticky footer, but other than that, nothing too shifty. Anyone have an ideas?

If you Google Black Warrior Review, you can see the site.

Here's the pertinent CSS, including Ryan Fait's sticky footer:

* {
margin: 0;
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #FF00FF;
}
a:active {
text-decoration: none;
color: #FF00FF;
}
html{
height: 100%;
}
body {
background-attachment: fixed;
background-image: url(background4.jpg);
background-repeat: repeat-x;
background-position: bottom;
text-align: left;
height: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}
p {
padding-bottom: 16px;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%; /* the bottom margin is the negative value of the footer's height */
margin-top: 0;
margin-right: auto;
margin-bottom: -35px;
margin-left: auto;
width: 600px;
}
.menu {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
padding-left: 10px;
text-align: left;
color: #000000;
width: 650px;
}
.content {
width: 590px;
line-height: 16px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 50px;
padding-left: 10px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 63px;
font-weight: bold;
width: 590px;
padding-left: 7px;
margin-bottom: -7px;
padding-right: 3px;
padding-top: 20px;
}
h2 {
margin-left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bolder;
width: 590px;
padding-left: 10px;
padding-top: 30px;
padding-bottom: 0px;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
padding-top: 16px;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
padding-bottom: 16px;
}
.contentimg {
padding-top: 10px;
padding-left: 10px;
}
.margin {
padding-left: 10px;
}
.revauthor {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #999999;
}
.revtop {
vertical-align: bottom;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.caption {
font-size: 10px;
font-style: italic;
text-align: right;
width: 590px;
padding-bottom: 10px;
padding-top: 5px;
}
.footer a {
color: #FFFFFF;

.caption {
font-size: 10px;
font-style: italic;
text-align: right;
width: 590px;
padding-bottom: 10px;
}
.contenttable {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
width: 590px;
text-align: left;
line-height: 16px;
padding-top: 10px;
padding-right: 0px;
padding-left: 10px;
}
blockquote {
padding-left: 20px;
}
.push {
height: 35px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait

*/
.footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
padding-left: 10px;
padding-bottom: 0px;
height: 25px;
vertical-align: bottom;
text-align:center;
color: #FFFFFF;
padding-top: 10px;
background-color: #999999;
}

Padding Disappears In Ie

Similar Tutorials

View Content

I am having a problem..
The site am working on looks great in FF but in IE breaks when you click on a the link to view a larger picture and then mouse off the link. The padding on the bottom of the body (#main) disappears. i have a Javascript that switches the image out for another one. i am not sure if this is the problem.

can someone please take a look i have been racking my brain on this for days.

http://www.avallo.com/test/fatcatweb/phototest.shtml

(Problem occurs when thumbnail is clicked and then moused off in IE 5.5 and IE 6)

i have a border on the #main div so you can see what i am talking about.

* Update *
it isnt the javascript.

here is the css and html.

Code:

#main {
border:#333 dotted 1px;
	float:right;
	display:inline;
	position:relative;
	width: 610px;
	padding-bottom:30px;
	background:url(images/body-top.gif) no-repeat;
}
#mainbody {
	margin: 30px 20px 20px 15px;
}
a.thumb {
	float:left;
	margin: 0 5px 5px 0;
	padding: 2px;
	border: #fff 2px solid;
}
a.thumb:hover {border: #895FA5 2px solid;}

					<div id="mainbody">
						<h1>Photo Portfolio</h1>
						<p>Fat Cat Art Studio is proud to provide our clients with images of their business, area, or workers. This portfolio is a SMALL representation of recent photos.</p>
						<div class="photos">
							<h2>The Shore Photos</h2>
							<div class="floatR" id="change1"><img src="images/photos/photo-01.jpg" alt="Enlargment" width="350" height="245" border="0" /></div>
							<p>Taking a stroll on the shore leads to inspiration and some unique perspectives.</p>
							<a class="thumb" href="javascript:change('change1','photo-01',350,245)"><img src="images/photos/photo-01x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
							<a class="thumb" href="javascript:change('change1','photo-02',350,263)"><img src="images/photos/photo-02x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
							<a class="thumb" href="javascript:change('change1','photo-03',350,264)"><img src="images/photos/photo-03x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
						</div>
					</div>

thanks,
weston