CSS - Problem, Ieexpore And Css Layout Cells When Refreshing

I am having a layout issue where if the contents of the left and right columns change, then the middle column increases or decreases in height.

See www.eyeongames.com

This is how it should look, but if you increase the font or the right or left columns expand, then the middle column shifts up or down.

I want the columns to be even across the top.

Thanks in advance!

Here is the style sheet code I am using.


Code:

a { 
   background: transparent; 
   color: #ff8f02; 
   text-decoration: none; 
} 

a:hover { 
   color: #fff; 
} 

body { 
   background: #550a04; 
   color: #d7cf00; 
   font-family: Verdana, Arial, Sans-serif; 
   font-size: 12px; 
   margin: 10px; 
   padding: 0; 
} 

form { 
   margin: 0; 
} 

h1,h2,h3,h4,h5,h6 { 
   margin: 0; 
   padding: 0; 
} 

hr { 
   background: #abc; 
   border: 0 none; 
   color: #abc; 
   height: 1px; 
   margin: 0; 
   padding: 0; 
} 

img { 
   border: 0 none; 
} 

p { 
   margin: 5px 0px 5px 0px; 
   padding: 0; 
} 

th,td { 
   padding: 2px; 
} 

div.leftColumn { 
   background: transparent; 
   border: 0px solid #555; 
   left: 10px; 
   padding: 5px; 
   position: absolute; 
   top: 400px; 
   width: 240px; /* Incorrect IE5 value */ 
   z-index: 2; 
   voice-family: "\"}\""; 
   voice-family: inherit; 
   width: 218px; 
} 

html>body div.leftColumn { 
   width: 218px; 
} 

div.leftColumn2 { 
    background: transparent; 
    border: 0px solid #555; 
    left: 10px; 
    padding: 5px; 
    position: absolute; 
    top: 143px; 
    width: 240px; /*Incorrect IE5 value */ 
    z-index: 2; 
    voice-family: "\"}\""; 
    voice-family: inherit; 
    width: 218px; 
} 

div.topColumn { 
    background: transparent; 
    border: 0px solid #555; 
    margin: 0px 200px 0px 130px; 
    min-width: 200px; 
    padding: 0px; 
    position: relative; 
    width: 600px; 
    z-index: 3; 
} 

div.middleColumn { 
   background: transparent; 
   border: 0px solid #555; 
   margin: 0px 200px 10px 240px; 
   min-width: 200px; 
   padding: 5px; 
   position: relative; 
   top: -105px; 
   width: 480px; 
   z-index: 3; 
} 

div.middleColumn2 { 
   background: transparent; 
   border: 0px solid #555; 
   top: 0px; 
   margin: 0px 200px 10px 240px; 
   min-width: 200px; 
   padding: 5px; 
   position: relative; 
   width: 480px; 
   z-index: 3; 
} 

div.rightColumn { 
   background: transparent; 
   border: 0px solid #555; 
   padding: 5px; 
   position: relative; 
   top: 43px; 
   margin: 0px 0px 0px 742px; 
   width: 240px; /* Incorrect IE5 value */ 
   z-index: 1; 
   voice-family: "\"}\""; 
   voice-family: inherit; 
   width: 218px; 
} 

html>body div.rightColumn { 
   width: 218px; 
} 

div.logoBlock { 
   background: transparent; 
   border: 0px solid #555; 
   left: 10px; 
   margin: 0; 
   padding: 0; 
   position: absolute; 
   text-align: left; 
   top: 10px; 
   width: 210px; /* Incorrect IE5 value */ 
   z-index: 2; 
   voice-family: "\"}\""; 
   voice-family: inherit; 
   width: 125px; 
} 

html>body div.logoBlock { 
   width: 188px; 
} 

div.copyrightBlock { 
   background: transparent; 
   margin: 0px 200px 0px 200px; 
   min-width: 200px; 
   padding: 0; 
   position: relative; 
   text-align: center; 
   width: 500px; 
   z-index: 3; 
} 

*.newItem { 
   color: #ff5500; 
} 

*.oldItem { 
   color: #fff; 
}

Here is part of the code.

There are multiple index.tpl files with similar code only the content changes, such as when browsing the games.

header.tpl

Code:

<div class="logoBlock"><--- LOGO IMAGE ---></div>
<div class="topColumn"><--- BANNER IMAGE ---></div>
<div class="leftColumn">
   <h3>{HEADER_BLOCK1_TITLE}</h3>
   <hr />
   <p><--- LINKS EDITED OUT ---></p>
   <h3>{HEADER_BLOCK2_TITLE}</h3>
   <hr />
   <p><--- MORE LINKS ---></p>
   <h3>{HEADER_BLOCK3_TITLE}</h3>
   <hr />
   <form><--- FORM CODE ---></form>
   <h3>{HEADER_BLOCK4_TITLE}</h3>
   <hr />
   <p>{HEADER_BLOCK4_CONTENT}</p>
   <!-- <hr />
   <p>{BACKEND_RSS}</p>
   <p>{BACKEND_TXT}</p> -->
</div>
<div class="rightColumn">
   <table style="width: 100%;background: #d7cf00;">
   <tr>
   <td align="center"><h3><font color="#550a04">Game Updates</font></h3></td>
   </tr>
   </table>
   <p align="center">{GAME_RSS}</p>
   <!-- <p align="center">{GAME_TXT}</p> -->
</div>

footer.tpl

Code:

<div class="leftColumn2">
   <table style="width: 100%;background: #d7cf00;">
   <tr>
   <td align="center"><h3><font color="#550a04">Latest News</font></h3></td>
   </tr>
   </table>
   <p>{BACKEND_RSS}</p>
   <!-- <p>{BACKEND_TXT}</p> -->
</div>
<div class="copyrightBlock">
   <p><--- COPYRIGHT ---></p>
</div>
</body>
</html>

index.tpl

Code:

<div class="middleColumn">
   <table style="width: 100%;background: #d7cf00;">
   <tr>
   <td align="center"><h3><font color="#550a04">News Headlines</font></h3></td>
   </tr>
   </table>
</div>
<!-- <div class="middleColumn">
   <p>{BACKEND_RSS}</p>
   <p>{BACKEND_TXT}</p>
</div> -->
<!-- BEGIN NEWS_BLOCK -->
<div class="middleColumn">
   <h3>{NEWS_SUBJECT}</h3>
   <h5>{NEWS_INDEX_RELEASE}</h5>
   <hr />
   <p><--- NEWS TEXT ---></p>
   <p>{NEWS_SOURCE}</p>
   <hr />
   <p><--- COMMENTS ---></p>
</div>
<!-- END NEWS_BLOCK -->
<div class="middleColumn"><p>{NEWS_INDEX_PAGES}</p></div>

My first post here and it promises to be a doozie!

I am new to CSS and I have been trying to use it in lieu of tables. So far I have learned a great deal and made great progress, but I'm not here to tell you of my success of course. I am here to tell you my problems!

Basically I am trying to create a fluid background. It consists of a 3x3 arrangement of divs. Like this:

ABC
DEF
GHI

They are arranged via float:left, and A,D,G all have clear:left.

A,C,G,I are the rounded corners with known widths and height, so they are static. All the others (B,D,E,F,H) are fluid.

The content is in E and should be the governing factor for the widths and heights of the fluid elements but I cannot seem to figure out how to make, for example, the heights of D and F match the height of E.

I am reluctant to post all my code in here because it seems like a lot, but if it would help clarify my problem then I will.

I hope my question is clear. I really need help but I don't know how to put it simply.

Thanks!

IE 7 has caused a problem with the layout on our website. The website worked fine with IE 6.

http://www.membersequity.com/mcard/

Can anyone help determine what the problem is?

Thanks.

Hi,
Since I'm a newcommer here, I'm not allowed to post proper URLs, so I'm hoping someone will have a look at the css problem in the following two images: (remove the spaces in the links)

h t t p : // farm4.static.flickr.com/3192/2929163063_5b1e1d9988.jpg?v=0

and

h t t p : // farm4.static.flickr.com/3188/2930025002_a7a4ed4fbe.jpg?v=0

The overlapping error in the second image occurs only in IE 8 with compatibility view turned on. The address is positioned properly in all other browsers.
In the style sheet a div tag positions the address :
#address {clear:both;position:relative; font-size:smaller;
top: 40px;
left: 0px;
width: 145px;
height: 80px;
}
I've used
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/menu_ie.css" />
<![endif]-->

In the page the address is written as:
<div id="address">
<div align="right">The Company Name Inc.<br>
1234 Glenn View Road<br>
Hilldale, OW 12345<br>
123-456-7890</div></div>

...and in menu_ie.css given the address tag top:90px or margin-top:90px instead of 40px but this does not have any effect.

A few other points: The page layout is not pure css but a combo of a table + css. The menu is in an include file placed in a table column as is the address.

I want to know a fix that will position the address correctly about 40px below the menu.

Thanks

Ok, this is my first time creating a layout using div tags and I'm having trouble setting the footer to stay at the bottom.

example

From the example above, I want to footer to sit below the menu. I can't seem to get this to work.

Here's my code.

Code:

body {
    margin:0px;
    padding:0px;
    font-family:verdana, arial, helvetica, sans-serif;
    background-color:white;
}

#header {
    height:50px;
    background-color:#0755AB;
    text-align: center;
}

#content {
    width:100%;
    height:200px;
    margin:0px 0px 0px 150px;
    background-color:#008080;
    text-align: center;
}

#menu {
    position:absolute;
    top:50px;
    left:0px;
    width:150px;
    height:300px;
    background-color:#FF9F9F;
    text-align: center;
}

#footer {
    height:30px;
    background-color:gray;
    text-align: center;
    position: relative;
}

Hello there.

I Have a small problem i think.
I have an layout which i want to have heights in %.
This seems to be difficult.

In the attachement i have an example of how it is ment to look.

The header should be 135px height.
The 2 leftside blocks should be 50% of the page which is left, and not the whole page (viewport).

I Don't have an good example, becouse i can't figure it out :S.

If someone has an link to somekind of div-builder or fluid design builder etc.. that would be nice .


Thx in advanced.

Hi.

I have a "small" problem.
I am using NiftyCorners (http://www.html.it/articoli/nifty/index.html) and whenever the
corner is added to a nav bar at the top of my page, the link in
the nav moves down a bit, making it lower than the rest. I have
tried playing with padding, margin, etc but can't seem to get the link position to stay put.

I am trying to get my nav bar to work like the one in the below link:

http://boardreader.com/pop/films/-/-/90.html?o=90

I am guessing it has to do with the fact that the containing div is blocking it? Any ideas how to prevent the shift in the link position?

Code below and Image of problem attached....

Thanks!

Code:

<table style="width: 100%; height: 100px; padding: 10px;" cellspacing="0">
        <tr style="width: 100%;">

            <td style="width: 100%">
                
<script type="text/javascript"></script>
<form name="searchform" action="/search.aspx" style="margin: 0pt; display: inline;">
<input name="a" value="f" type="hidden">	
<input name="z" value="1" type="hidden">
    
    <div id="logo" style="float:left; top:0px;">
        <div>
        <a href="http://www.x.com" tabindex="-1" class="logoimg"><img src="http://pics.x.com/aw/pics/logos/logo_x45.gif" alt="X" border="0" height="45" width="110" /></a>
        </div>
    </div>

    
    <div id="mastermenu" style="top:16px; left:128px; border-bottom:solid 1px black; right:15px; position:absolute">
            <div>&nbsp;&nbsp;&nbsp;<span><script type="text/javascript">//WRITE LOGIC FOR SIGNIN OR REGISTER HERE</script>Hello! <a href="http://www.x.com/singin/signin.aspx">Sign In</a>&nbsp;or&nbsp;<a href="http://www.x.com/registration/register.aspx">Register</a>.</span></div>
            <ul id="mastertabslist" style="padding-top:9px;">
                <li><a href="../today/today.aspx"><span>Home</span></a></li>
                <li><a href="../looking/looking.aspx"><span>Community</span></a></li>

                <li><a href="../search/search.aspx"><span>Search Tools</span></a></li>
                <li class="help"><a href="#nogo"><span>Help</span></a></li>
            </ul>
    </div>
    
    <script type="text/javascript">
     [SNIP...]
    </script>
    
<div id="search_main" style="float:right; height: 95px; width:350px; border:solid 1px red; padding-top:5px;">
            <div style="float:left; width:50px; height:20px; vertical-align:bottom; margin: 0 5%;">Search&nbsp;in:</div>

	        <div id="div_videos" style="float:left; width:50px; height:20px; padding-left:10px;"><a href="#nogo" id="search_videos" class="" style="cursor:pointer;" onclick="switch_search_videos(this.id);"><span>Videos</span></a></div>
	        <div id="div_images" style="float:left; width:50px; height:20px; background-color:#6699CC;" class="is_menu"><span style="padding-bottom:5px; vertical-align:top; margin-bottom:5px;"><a href="#nogo" class="l_link" id="search_images" style="cursor:pointer;" onclick="switch_search_images(this.id);">Images</a></span></div>
	        <div id="div_profiles" style="float:left; width:50px; height:20px; padding-left:5px;" class="is_menu"><a href="#nogo" class="l_link" id="search_profiles" style="cursor:pointer;" onclick="switch_search_profiles(this.id);"><span>Profiles</span></a></div>
	        <div id="div_forums" style="float:left; width:50px; height:20px; padding-left:5px;" class="is_menu"><a href="#nogo" class="l_link" id="search_forums" style="cursor:pointer;" onclick="switch_search_forums(this.id);"><span>Forums</span></a></div>
	        
	        <div id="search_box" style="background-color:#6699CC; position:relative; width:330px; float:left;">
	           <span>&nbsp;&nbsp;&nbsp;</span>

	           <input class="query" name="q" type="text">
		       <input class="submit" value="Search" type="submit">
	           <a class="adv" href="/index.search.aspx?a=a&x=1">Advanced search</a>
	           <br />
	        </div>

     </div>	        
</form>

            </td>

        </tr>
</table>

Been pulling my hair out all day over this. Got most of the bugs figured out, but these last two I have no clue about. Both problems only seem to happen in IE7

Site is here.

First problem is with the navigation bar, when I mouse over the bottom three links (recent projects, news, and contact us), it shifts the down for some reason.

Second problem, Right below the innovative & efficient areas, the footer seems to come up and cover that area. Please, any help is really appreciated. Thanks!

Please have a look in the attached example:

the layout works fine (after some testing) in Mozilla. My problem is that the navigation breaks after the fourth button in IE. If i give a width to the list than the whole navigation breaks after the content at the left side.

Anyone with some advice?

Hi all,

So I've been looking at this Glish template and I've been trying to create a website with it.

The problem is that when I (or another user) chooses "Text Size - Largest" the third column disappears below the others.

Is there any way to prevent this and make sure that column starts at the top, with the others?

Should I be using "position: absolute" or other more specific code, in order to make the position of the columns in the layout more stable?

Thanks.

I'm trying to create a fairly easy layout, making use of DIVs. The following structure is what I'm trying to accomplish:

www.dvolve[PLEASE REMOVE].org/tst.jpg

And here's what I currently have:

www.dvolve[PLEASE REMOVE].org/tst.htm

However, I'm not really convinced that this is the right solution. I am unable to scroll in the content div (IE6) for one, which is quite a problem. I'm hoping to make this look the same for most browsers. Does anyone have a better layout that achieves this or any pointers on what I'm doing wrong?

Hi,
I am trying to create a two sided site with nav and constant info on the right and a dynamic area on the left. I have laid out the right side as I need it but can't get both sides to start at the same point on the page. I think this has to do with the way I need it setup to show the background images I have for each div. The right side always starts after the left has finished depending on how much content is in the left area. I have an example link attached with some of the basic code and the .css file

Example Page
http://parkesproperties.com/dublin_blues/divtest.html

.css file
http://parkesproperties.com/dublin_blues/base_mz2.css

All images
http://parkesproperties.com/dublin_blues/images

Is there a work around or have I missed something obvious?

Any help is appreciated!
Cheers
Denis

Hi

I'm trying to layout some information on a page that would previously have been designed using a table structu

Code:

<table>
  <tr>
    <td>Item 1
    <br />
    Item 2
    <br />
    Item 3</td>
  </tr>

  <tr>
    <td>Item 1
    <br />
    Item 2
    <br />
    Item 3</td>
  </tr>
</table>

But now have tried to redesign the layout using the following CSS:

Code:

#boxProdDisplay
{
width:500px;
padding:0;
margin:0;
}

#boxProdDisplay p
{
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}

#boxProdDisplay p.p1
{
float:left;
clear:left;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}

#boxProdDisplay p.p2
{
float:left;
clear:left;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}

#boxProdDisplay p.p3
{
float:right;
clear:right;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}

#boxProdDisplay p.p4
{
float:right;
clear:right;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}

The problem is that it doesn't quite display correctly. The <P> elements are floated correctly, but they only appear after the last <P> tag which has been aligned left. With a table structure I could use valign to send everything to the top of the page. What can I do here?

Many Thanks.