CSS - Fixed Positioning Issues

Okay I've gotten to a point in my design where I'm a bit stumped.

I have been working on a three column layout with a fixed header and footer. The entire idea behind the fixed footer is so that my entire promotional press kit and social networks will be available and in view in the footer above the fold at all times for easy access.

After a few little tweaks the layout looks good and turned out nicely. However, now I am adding content and navigation and I am having some issues with regards to how it is reacting when my browser window is re-sized and the layout of the far left navigation.

Okay so when I shrink the browser window two things happen, I get a horizontal scroll, which isn't too bad, I mean that is normal in a lot of sites but because the footer and header are fixed it looks a little weird. Is there a way to stop this without going fluid? The other thing it does when it is shrunk, the background image in the footer shifts to the right along with the navigation which should not happen if it is fixed right? What is could be causing that? If I have nested div inside the footer div does it need to be declared fixed too or can it be relative because it is a child of the footer?

The biggest problem is that my navigation menu on the left will have four links. I would like two links above and two links below. I would like the top left and bottom left to align to the left with space between those two links and the top right and bottom right, which will also align left. How would I accomplish this using the least amount of mark up in the xhtml and the least amount of code in css?

Right now they aren't links, I'm just trying to lay it first. What I was thinking, was using a div to hold a footer ul and li class? Would I just apply the class to each link or would I apply the class to two, one div class above holding two links and one div class below or do I even need an extra footer div anyway if I'll be assigning separate classes?

I'm confused as to the best way to fix all this, your help would be appreciated, the xhtml validates and so does the css.

Here is the link to the testing site: http://www.lonniebruhn.com/sitelab/

Hi all,

Okay, so I've got a page with a central column which has a drop-shadow and a background image... The obvious problem is that the repeated background image doesn't always line-up with the background image in the dropshadow. Plus, The backround image changes position whenever the page is resized.

So I was looking here, to see if I could find the code to center the background image in the screen, and make it a fixed position, but even then, when you resize the page, the background image seems to move with it.

Does anyone know how to fix a background image so that it will stay aligned with the central content/dropshadow of the page?

Thanks.

Hi everyone,

I have posted here [HTML Programming] because I'm not entirely sure what forum this particular problem should be put in.

I have a fixed menu that I include using php. From looking at the source code I can see that it has definately included the menu. However IE only displays the menu 50% of the time.

I have no idea why. At first I thought it was because I have a javascript animation for it to slide down, but I removed that and I still get the same problem.

To see what I mean please visit twisted-reality.co.uk using IE and refresh a few times.

Firefox, Opera, Safari and Netscape all display the menu fine, but IE feels like it needs to be different.

I'm new to this forum but I hope someone can help

Twisted-Daemon

Join Date: May 2008
Posts: 2

Firefox bug combining absolute and fixed positioning
Hey helpful people.

I am designing a site which has a floating toolbar (position: fixed) with popup menus. The popup menus are using nested lists and position: absolute to display.
JavaScript is dealing with the transition.

The problem is that in firefox alone the fixed toolbar jumps when the popup menus show and hide. Removing either position: fixed or the offset (bottom: 27px) removes this problem. However these need to be present in the design.

Anyone know a workaround? (webpage and css below)

Code:

<div class="toolbar_O">
  <div class="toolbar_I">
    <!-- top page info -->
    <div class="pageInformation cf">
      <!-- Page Status Info Start -->
      <div class="pageStatus">
        <h4 class="statusLabel">Status: </h4>
        <span class="status">Live</span> </div>
      <!-- Page Status Info End -->
      <div class="RHS cf">
        <div class="toolbarMenu">
          <ul>
            <li class="publicationDates"><a href="#" title="Publication dates">Publication dates<span class="moreArrow"><span class="wai">^</span></span>
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
              <ul class="popup">
                <li>
                  <form>
                    <p>
                      <label for="email" class="expiryDate">Set expiry date</label>
                    </p>
                    <input type="text" class="inputTextbox" name="expiryDate" id="expiryDate"/>
                    <p>
                      <label for="email" class="liveDate">Set live date</label>
                    </p>
                    <input type="text" class="inputTextbox" name="liveDate" id="liveDate"/>
                  </form>
                </li>
              </ul>
            </li>
            <li class="dateAction"><a href="#" title="Last published">Last published 29/01/08<span class="moreArrow"><span class="wai">^</span></span>
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
              <ul class="popup">
                <li>
                  <p class="cf"><span class="label">Author:</span><span class="value">Anne Light</span></p>
                  <p class="cf"><span class="label">Approver:</span><span class="value">John Smith</span></p>
                  <p class="cf"><span class="label">Review date:</span><span class="value">21/06/07</span></p>
                </li>
              </ul>
            </li>
            <li class="versions"><a href="#" title="Other versions">Other versions (#)<span class="moreArrow"><span class="wai">^</span></span>
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
             <ul class="popup">
                <li>
                  <p>Ann Light's version sent for approval on 24/12/07 at 10.03am</p>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- bottom user functions -->
    <div class="userFunctions cf">
      <!--Left Hand Side Buttons Start -->
      <div class="btnLHS"> <a id="#" class="btnHelp" title="Help" href="#">Help</a>
        <div class="toolbarMenu pageActions">
          <ul>
            <li class="otherPageActions"><a href="#" title="Other page actions">Other page actions<span class="moreArrow"><span class="wai">^</span></span>
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
              <ul class="popup">
                <li>
                  <ol>
                    <li><a href="pa001a_delete_page.html" class="lbOn modal:{width:450}" title="Delete page">Delete this page</a></li>
                    <li><a href="pa002_set_date.html" class="lbOn" title="Set date">Set publication/expiry date</a></li>
                    <li><a href="pa003_page_permissions.html" class="lbOn modal:{width:450}" title="See page permissions">See page permissions</a></li>
                    <li><a href="pa004_add_subpage.html" class="lbOn" title="Create sub page">Create sub page</a></li>
                    <li><a href="pa005_page_history.html" class="lbOn modal:{width:450}" title="See page history">See page history</a></li>
                    <li><a href="#">Preview</a></li>
                    <li><a href="link_1d.html" class="lbOn modal:{width:450}" title="Save a copy">Save a copy</a></li>
                  </ol>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <!-- Left Hand Side Buttons End -->
      <!-- Right Hand Side Buttons Start -->
      <div class="btnRHS"><a href="st016_page_notes.html" class="lbOn pageNotes" title="page notes">See page notes</a> <a id="#" class="btnReject" title="Do Not Approve" href="#"><span class="buttonText">Don't Approve</span></a> <a id="#" class="btnApprove" title="Approve" href="#"><span class="buttonText">Approve</span></a> </div>
      <!-- Right Hand Side Buttons End -->
    </div>
  </div>
</div>

Code:

div.toolbar_O { 
	background: #eaf1f9 url(../images/interface/toolbar_bg.gif) 0 0 repeat-x;
	border: 1px solid #3a8ea8;
	padding: 9px 0px;
	width: 729px;
	color: #0a3b3f;
	font-size: 0.9em;
	position: fixed;
	bottom: 20px;
	left: 100px;
	height: 82px;
	}
body.editMode div.toolbar_O {
	position: relative;
	left:0;
	bottom: 0;
	float:right;
}	
	
.toolbar_O .toolbar_I {
	border: 1px solid #073f58;
	background: url(../images/interface/toolbarinner_bg.gif) #54b4cc;
	margin: 0px 9px;
}


.toolbarMenu ul li a, 
.toolbarMenu ul li a:visited {
	font-weight: bold;
	color: #77aeb5;
	border: 1px solid #287e95;
	text-decoration: none;
	padding: 4px 5px 6px 5px;
	background: #e6f4f5;
	color: #0a3b3f !important;
	display: -moz-inline-box;
	display: inline-block;
	height: 13px;
}

.toolbarMenu ul {
	padding:0;
	margin:0;
	list-style-type: none;
	margin: 0;
}

.toolbarMenu ul li {
	float:left;
	position:relative;
	margin: 0 0 0 10px;
}
.toolbarMenu ul li ul li {
	margin: 0;
	font-size: 0.9em;
}
.toolbarMenu ul li ul {
	visibility: hidden;
	position:absolute;
	bottom: 27px;
	left:0;
	padding: 5px;
	background: #ebf6f8; 
	border: 1px solid #2e869c;
	margin: 0;
	z-index: 1000;
	font-size: 1em;
	text-align: left;
}

.toolbarMenu ul .moreArrow {
	display: -moz-inline-box;
	display: inline-block;
	padding: 6px 8px;
	width: 1px;
	margin-left: 10px;
	border-left: 1px solid #89abb7;
	background: url(../images/interface/morearrow.gif) 3px 0 no-repeat
}
.toolbarMenu ul li.open ul {
	visibility: visible;
	
}

.toolbarMenu ul li.versions.open ul {
	width: 250px;
}

div.toolbar_O .toolbarMenu ul li.open a {
	color: #4594A5 !important;
}
div.toolbar_O .toolbarMenu ul li.open .moreArrow{
	background: url(../images/interface/closearrow.gif) 3px 0 no-repeat;
}
/* top part of toolbar */
.toolbar_O .pageInformation {
	padding: 6px;
	height: 25px;
}
 
.toolbar_O .pageInformation .pageStatus {
	color: #FFF;
	font-size: 1.3em;
	width: 170px;
	float: left;
}
.toolbar_O .pageInformation .RHS {
	float: right;
}
h4.statusLabel {
	height: 100%;
	display: inline;
	text-transform: uppercase;
}
div.toolbar_O div.pageInformation .label, 
div.toolbar	_O div.userFunctions .label {
	width: 75px;
	float: left;
	text-align: left;
}
div.toolbar_O div.pageInformation .value, 
div.toolbar	_O div.userFunctions .value {
	font-weight: bold;
	text-align: left;
	float: right;
	vertical-align: top;
	width: 75px;
}
div.toolbar_O div.pageInformation .inputTextbox {
	width: 80%;
}

/* bootom part of toolbar */
.toolbar_O .userFunctions {
	padding: 8px 0;
	height: 25px;
}
div.toolbar_O div.userFunctions div.btnRHS {
	float: right;
	margin: 0px 10px 0px 0px;
}
div.toolbar_O div.userFunctions .btnLHS {
	float: left;
	margin: 0px 0px 0px 10px;
}
div.toolbar_O div.userFunctions div.btnLHS a.btnHelp, 
div.toolbar_O div.userFunctions div.btnLHS a.btnHelp:hover {
	padding: 5px 5px 5px 25px;
	margin: 1px 5px 0 0;
	background: #e6f4f5 url(../images/interface/icon_help.gif) 3px 3px no-repeat !important;
	float: left;
	border: 1px solid #287e95;
	text-decoration: none;
	font-weight: bold;
	color: #0a3b3f;
	height: 12px
	
}
.toolbarMenu.pageActions {
	float: left;
}
.toolbarMenu ol {
	margin: 0;
	padding: 0;
	width: 320px;
	height: 60px;
	list-style: none;
}
.toolbarMenu ol li,
.toolbarMenu ol li a {
	margin: 0;
	padding: 0;
	float: left;
	width: 150px;
	min-height: 8px;
	display: inline-block;
	border: none !important;
	color: #0a3b3f !important;
	font-size: 1.2em;
	background: none;
	}
div.toolbar_O div.toolbar_I a.pageNotes {
	font-weight: bold;
	color: #0a3b3f;
}
div.toolbar_O div.toolbar_I a.pageNotes:hover {
	color: #FFF;
}

/* approve/reject btns */
div.toolbar_O div.userFunctions div.btnRHS a.btnApprove,  
div.toolbar_O div.userFunctions div.btnRHS a.btnReject {
	border: 1px solid #287e95;
	border-bottom: 2px solid #06465f;
	border-right: 2px solid #06465f;
	text-decoration: none;
	height: 12px;
	padding: 5px 15px 5px 0;
	background: #fffeff url(../images/interface/icon_approve.gif) 95% 3px no-repeat;
	display: -moz-inline-box;
	display: inline-block;
	color: #0a3b3f;
}
div.toolbar_O div.userFunctions div.btnRHS a.btnApprove:hover,  
div.toolbar_O div.userFunctions div.btnRHS a.btnReject:hover {
	background-color: #135d82;
	border: 1px solid #FFF;
	border-bottom: 2px solid #06465f;
	border-right: 2px solid #06465f;
	color: #FFF;
}
div.toolbar_O div.userFunctions div.btnRHS a.btnReject {
	background: #fffeff url(../images/interface/icon_reject.gif) 95% 3px no-repeat;
}



li.otherPageActions ul,
li.otherPageActions ul li{
	margin: 0;
	padding: 0;
	list-style: none;
}

Hi all,

I have a page that is generated through PERL, but I cannot get the positioning right. There are graphics, 1 - 9 depending on what the user chooses, that I need to display at the top of the page. Below this, I need to place text descriptions of the graphics.

However, the text is displaying under the graphics.

The code that I am using for the CSS is:
Code:

.MainWindow{
    position: absolute;
    max-width: 800px;
    width: expression(document.body.clientWidth > 800? "800px": "100%" ); 
    font-family:Trebuchet MS, Arial, Helvetica, sans-serif; 
    font-size:Medium; 
    color:#AF31F4; 
    background-color:white;    
    Height: auto;
    margin: 0 auto ;    
}

.ShowCards {
    position: absolute;
    vertical-align: top;
    margin: 0 auto;
    top: 2px;
    width: 640px;
    height: auto;
    Left: 200px;
    COLOR: #AF31F4; 
    FONT-FAMILY: Verdana, Helvetica, sans-serif; 
    FONT-SIZE: 11pt; 
    FONT-WEIGHT: bold; 
    border-color:Red;
    border-style:solid;
}

.Location2_3 {
position: absolute;
top: 110px;
left: 160px;
width: 85px;
height: 110px;
text-align: center;
}

.Location2_5 {
position: absolute;
top: 110px;
left: 310px;
width: 85px;
height: 110px;
text-align: center;
}

.Location3_4 {
position: absolute;
top: 220px;
left: 235px;
width: 85px;
height: 110px;
text-align: center; 
}

.Text1 {
position: absolute;
top: 100px;
top-margin: 20px;
left: 10px;
width: 500px;
}

This of course is not the complete CSS file, it is only representative. If you need/want to see the complete file, you can go here

And the HTML that gets generated is:
Code:

<Body>
<DIV CLASS="MainWindow">
<div id="printReady">
<DIV CLASS="ShowCards">
<DIV CLASS="Location1_4">
1<BR>
<img src="../tiles/thumbs/ansuz.jpg">

</DIV>
<DIV CLASS="Location2_5">
2<BR>
<img src="../tiles/thumbs/daeg-r.jpg">
</DIV>
<DIV CLASS="Location2_3">
3<BR>
<img src="../tiles/thumbs/fehu.jpg">
</DIV>
<DIV CLASS="Location3_4">
4<BR>
<img src="../tiles/thumbs/nauthiz.jpg">
</DIV>
</DIV>

<DIV CLASS="Text4">
Rune 1<BR>
<font color="#0000FF">Name: Ansuz</font><BR>
<font color="#0000FF">Position 1</font>:&nbsp;&nbsp;Past feelings and desires<br>
<font color="#FF0000">Keywords:</font> ... Text deleted for space ...<BR>
<font color="#FF0000">Meaning:</font> ... Text deleted for space ...<P>

Rune 2<BR>
<font color="#0000FF">Name: Fehu</font><BR>
<font color="#0000FF">Position 3</font>:&nbsp;&nbsp;Present feelings and desires<br>
<font color="#FF0000">Keywords:</font> ... Text deleted for space ...<BR>
<font color="#FF0000">Meaning:</font> ... Text deleted for space ...<P>
Rune 3<BR>

<font color="#0000FF">Name: Daeg Reversed</font><BR>
<font color="#0000FF">Position 2</font>:&nbsp;&nbsp;Feelings and desires of others<br>
<font color="#FF0000">Keywords:</font> ... Text deleted for space ...<BR>
<font color="#FF0000">Meaning:</font> ... Text deleted for space ...<P>
Rune 4<BR>
<font color="#0000FF">Name: Nauthiz</font><BR>

<font color="#0000FF">Position 4</font>:&nbsp;&nbsp;Your heart's deepest desires.  If this rune is positive these desires will come to fruition in the next four months
<br>
<font color="#FF0000">Keywords:</font> ... Text deleted for space ...<BR>
<font color="#FF0000">Meaning:</font> ... Text deleted for space ...<P>
</DIV>
</DIV>
</BODY>

If you would like to see an example of this, go here Choose a layout in the drop down on the top left and follow the instructions. Will only take a few seconds, it is not a long process......

Thanks for any help or suggestions.
Jim

Hi,

Just wondering it anyone can help... I am trying to get my left hand navigation to sit at the top of the cell and no matter what I change it won't budge!

You can see what I am working on at www. freedomwhalewatch .com.au /Stirling /index.html as you can see the left hand navigation is sitting towards the bottom... anyone have any suggestions as to how I would move it up to be directly underneath the logo?

To see my working files just use the right click and view page source.

Any help or suggestions would be much appreciated. I am a newbie to css!

Cheers,
Jen

** UPDATE - sorry guys i spelt the url incorrectly!
http://www. freedomwhalewatch .com.au/Stirling /index.html

I am recoding the site jthensley dot com (The forum wouldn't let me list the site needing assistance) to HTML 5 and CSS. I've redesigned some features, which are basically already in the new layout, at jthensley dot com / 2012alpha The 2 horizontal neon lines and the vertical line are simply repeated outside of the header by the CSS. However, one problem I have is that the vertical line that is repeating becomes unaligned with the header if the browser window is expanded. Is there anyway to have it as a repeating background, set to begin at a certain pixel position, and move to the right to maintain alignment with the header as the page is expanded?

Secondly, at the bottom, you have the copyright line, which I plan to use as a repeating background or image, as well, and my picture to the right, standing on top of the copyright line. Idealy, I would like the picture of myself to be in a certain area, and push down as page contents make the page longer, but maintain it's "link" with the footer. Any suggestions on how to achieve that? Thanks for your help! This is quite a refresher/learning experience for me!

The CSS I have already written is below.

* {
margin: 0 auto;
padding: 0;
}

body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
color: white;
background-color: #000000;
background-image: url(images/horzneon.png), url(images/horzneon.png), url(images/verneon.png);
background-position: 0px 137px, 0px 172px, 250px 0px;
background-repeat: repeat-x, repeat-x, repeat-y;
}

ul#nav {
height: 185px; width: 1024px;
margin: 0 auto;
background: url(images/header.jpg) no-repeat;
}
height: 185px; width: 1024 px;

I am trying to position two buttons on a line. They should each sit in the middle of one half of the line. Here's my code:
Code:

<html>

<head>

<style type="text/css">

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url('http://www.oscaralexander.com/tutorials/img/bg_button_a.gif') no-repeat scroll top right;
    color: #33C;
    display: block;
    float: left;
    font: bold 16px arial, sans-serif;
    height: 24px;
    margin:0 auto;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('http://www.oscaralexander.com/tutorials/img/bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}

a.button:active {
    background-position: bottom right;
    color: #22B;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}
</style>
</head>


<body>
<div>
	<div style="float:left; width:50%; background-color:#EEE">
		<a class="button" href="#" onclick="this.blur();"><span>Learn More</span></a>
	</div>
	<div style="float:right; width:50%; background-color:#DDD">
		<a class="button" href="#" onclick="this.blur();"><span>Buy Now!</span></a>
	</div>
</div>
</body>
</html>

And here's a link to the test page:
http://rentalocal.thad.com/test
Does anyone know what I've done wrong?

Thanks,
Thad

I'm having some issues with the positioning of a link in my header. For some reason in IE 7, it does not line up below the search box like it shows in IE 8, Firefox, Chrome and Safari. I cannot figure out for the life of me, what's wrong.

http://trinebay.net/cart/ is the site. You can see in the header the advanced search is the link that wont align in IE7 and probably IE6 as well. Thanks for the help guys

Hi,

First off, I've tried a quick search to see if anyone else has posted this problem, but didn't come up with anything. So, if I am repeating, apologies :-)

Anyway, I've got a problem that hopefully someone will be able to help me with. It's probably quite simple, but my CSS is a bit hit and miss ;-)

Anyway, firstly, here's the CSS:

Code:

body {
	margin: 0;
	padding: 0;
	background: #FFFFFF url(images/img01.gif) repeat-x;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #8E959B;
}

#header {
	width: 100%;
	height: 225px;
	margin: auto;
	padding: 12px 0 0 0;
}

#logo {
	float: left;
	width: 208px;
	height: 208px;
	margin: 0px 0 0 14px;
	padding: 0 15px 0 0;
	border: 3px solid #EB850C;
}

#logo h1 {
	padding: 120px 0 0 0;
	text-align: center;
	letter-spacing: -3px;
	font-size: 2em;
	font-weight: normal;
}

#logo h2 {
	margin-top: -10px;
	text-align: center;
	font-size: medium;
}

#logo a {
	text-decoration: none;
	text-transform: lowercase;
}

#logo a:hover {
	color: #990000;
}


#splash {
             position: absolute;
             left: 250px;
            margin-right: 10px;
            top: 100px;
            border: 3px solid #EB850C;
            width: 73%;
            max-width: 73%;
            height: 115px;
} 

#menu {
	float: right;
	padding: 0 0 0 0;
}

#menu ul {
	height: 55px;
	margin: 0;
	padding: 41px 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	border: 3px solid #EB850C;
	display: block;
	float: left;
	width: 80px;
	height: 22px;
	padding-top: 12px;
	text-align: center;
	text-decoration: none;
	text-transform: lowercase;
	letter-spacing: -1px;
	font-size: 1em;
}

#menu a:hover, #menu .active a {
	color: #FFFFFF;
}

And the HTML:

Code:

<body>

<div id="header">
	<div id="logo">
		<h1><a href="#">Company Logo Image</h1>
		<h2></a></h2>
	</div>
	<div id="menu">
	        <ul>
		<li ><a href="#">About</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Careers</a></li>
		<li><a href="#">Calendar</a></li>
		<li><a href="#">Contact</a></li>
	       </ul>
	</div>
	<div id="splash">This is the page heading montage image</div>
	</div>
</div>
</body>

The problem is, I need the splash div to resize depending on the width of the screen. The idea being a cheat so depending on different resolutions, the different the size of the div and with a background-image set, the image will appear to expand/contract depending on the width of the screen. It's gonna be a repeating montage image. If the window is over, say, 80% wide, then it works fine. Thing is, if you shrink the width of the window past about 80%, then the div starts to go off the right hand side of the screen...

Hopefully I've made myself reasonably clear?

Any ideas?

Thanks!

Hello


I've been developing a new website for my dad.. Unfortunatly i cant seem to get some of the things to look how i want them. so i was wondering if you could help, as some of you have been a great help to me on previous websites.


the pages in question are the following:

http://visitours2london.com/v2/ (in internet explorer) the middle conent drops below the sidebars. (in firefox its fine)

http://visitours2london.com/v2/tours2.html (both in i.e. and firefox doesnt come out right) i cant get the titles of the dt tags to align to the right hand side.. and in i.e. the back to top text jumps to the far right, overlaying onto side bar two..


All pages are xhtml valid... link to check is on bottom of the page...


Ignore everything else on the website, its simply those two pages that im working on.. other aspects of the website will either not load or not work properly as ive not finished them.

For a search tool, I have a "results toolbar", horizontally across the top of the results page. Within this toolbar (position: relative) I have a span containing the current page, absolutely positioned at top: 8px; left: 5px;

What I get when rendering however, is the following:
Right: http://tim.komta.com/images/css/Firefox.gif
Wrong: http://tim.komta.com/images/css/IE.gif

More accurately, I should say that I get what I expect in Firefox, and not what I expect in IE, which is not overly surprising.

Anyway, what am I doing wrong?

If I change the text-align of the box from right (current) back to left, it's still overlaid on top of the images, but on the left, like it's supposed to be. It kinda seems like IE is making the images the bounding box for absolute positioning.

Any thoughts?

MPEDrummer

Hello,

I'm relatively new to using CSS as the foundation of a site, as i've only ever built sites for family/work etc using tables. I have used it previously for styling and so on, but not as intensively as i now am. It's great, but a couple of issues are giving me a headache - the fun of web design, hey?...

I'm experiencing two problems, and have spent a lot of time describing them (with examples and images) on the following page - fnb4wd.com.au/4x4wh/help/help.htm - not wanting to clutter up the forum with my explanations and too many images.

The first is to do with the 100% height trick - my "wrapper" div is not expanding with my "content" div - but i do not believe faux columns are possible for my design (if someone proves me wrong, great!) as i don't have two full height columns, but one content column and a vertical menu div...

The second issues is with a Horizontal menu i am using as main navigation. In both FireFox & Chrome, the menu shifts down so the text links are unreadable unless hovered over. In IE, it's positioned as i want (with Comp View Settings turned on for IE8).

So, if anyone could shed come light on my problems, i'd love to hear some ideas.

The full explanation, complete with working examples and images (as well as my code) can be seen at fnb4wd.com.au/4x4wh/help/help.htm.

Thanks in advance,

Azerus85

EDIT: OK, I've worked out all of the issues except the fourth one, which doesn't really have to do with CSS specifically. Why do line breaks insert gaps? The problem is especially prevalent in IE.

First issue: I'm trying to position one image over another image and its inserting this big gap! As seen on http://www.zacwittedesign.com/olive/pool.html we have the "about the pool" image position on top of the big image to the left side, but you can see there is a big gap above the big image. If I simply comment out the 'about the pool' image, the gap goes away and all is fine. I thought relatively placed elements were not supposed to affect the flow of elements beneath them? Can you see anything wrong in my code?

Second Issue: There are two issues with the layer on the top of the page where the dots should be coming out of 'new projects' (id=projects_layer). It should be positioned over top.jpg as seen in hotstuff.html. In that page I manually moved it down by adding an additional 60px to the relative offset, but the space where it would have occupied remains and pushes the whole page down. Everything should look like it does in portfolio.html which doesn't currently use layers. You can see a version without my manually shifting it down and demonstrating the third issue at pool-valign.html.

Third Issue: The vertical-align of all the images inside the projects layer. For the layout to be correct, the images need to be top-aligned or they won't line up with the dots and they'll slightly cover the button images beneath them. I have a style property set vertical-align:top; but it doesn't seem to do anything. Do I misunderstand the vertical-align property? There's also a small gap beneath the images when viewed with IE. I've changed the background color of the layer so you can more easily see the problem.

Fourth issue: You've probably noticed in my code that I insert and HTML comment for every line break. That is because if I don't, IE reads the line beaks as non-whitespace and inserts both vertical or horizontal gaps between the images. Whats the deal there?

Fifth Issue: In IE there is a one or two pixel gap above right.jpg where the tim olive logo is. This doesn't happen on firefox and it doesn't happen on pages that don't use layers like portfolio.html.

...And I haven't even tried it on a mac browser yet...