CSS - Ie Wrapper Display Issue

Hi

I'm developing a new website using non tabular css and xhtml. I've used a predefined template which has been edited to my needs for the project.

The problem I have is the top menu displays perfectly in FF3 but not in IE7, the top menu has a width of 100% with each of the 4 links having a width of 25% so in FF3 displays right across the page perfectly, but in IE7 the last menu link breaks to a new line.

This url shows the issue im having:
http://www.purepcs-store.co.uk/tim/new

HTML USED:
Code:

<div id="menu" class="width">

    <ul>
      <li>
        <a href="index.php" onfocus="blur()">
          <span class="title ">Home</span></a>
      </li>
      
      <li>
        <a href="products.php" onfocus="blur()">
          <span class="title ">Products</span></a>

      </li>

       
      <li>
        <a href="forum/" onfocus="blur()">
          <span class="title ">Forum</span></a>
      </li>

      <li>
        <a href="contact.php" onfocus="blur()">

          <span class="title ">Contact Us</span></a>
      </li>

    </ul>

  </div>

RELEVANT CSS:

Code:

#menu {
  margin: 0 auto;
}

#menu ul {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;

  text-align: left;
  background: #3B5D77 url(../images/bg/menu.gif) repeat-x top left;
}

#menu ul li {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu ul li a {
  float: left;
  width: 25%;

  font: 400 1.2em arial, sans-serif;
  letter-spacing: 0.1em;

  color: #fff;

  border-top: 7px solid #41637D;
  border-bottom: 15px solid #FFF;
}

#menu ul li a span {
  display: block;
  padding: 2px 7px;
}


#menu ul li a span.desc {
  font-size: 0.8em;
  color: #8C8D94;
}


#menu ul li a:hover,
#menu ul li a.here {
  background: #4A5C6A;
  border-top: 7px solid #455660;
}

#menu ul li a:hover span.desc,
#menu ul li a.here span.desc {
  color: #FFF;
}

.width {
  width: 100%;
}

full css code can be seen he
http://purepcs-store.co.uk/tim/new/css/layout.css

Does anyone have any ideas on how to combat this issue, if you can point me in the right direction it would be much appreciated.

Cheers

Hi All,

I was wondering if someone could help and take a look at this. I have a site that is not displaying correctly in chrome and also Safari (at least on the iPhone).

The rest of the page is fine, but these images appear stretched vertically (the horizontal width appears OK).

The CSS for the element is:

CSS Code:
Original - CSS Code .keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;} .keybox img{float:left;width:35%;padding:0px;margin:0px;} .keybox div{float:right;width:60%;padding:1%;} .keybox div ul{text-align:left;margin:0px;padding:0px;}

  

 .keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;}


 .keybox img{float:left;width:35%;padding:0px;margin:0px;}


 .keybox div{float:right;width:60%;padding:1%;}


 .keybox div ul{text-align:left;margin:0px;padding:0px;} 

The html for the element is:

html Code:
Original - html Code <div class='keybox'> <img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> <div> <h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares </a></h2> <p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> <ul> <li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> <li><a href='/parts/volvo/'>Volvo Spare Parts</a></li> <li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li> <li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li> </ul> </div> </div>

  

<div class='keybox'>
<img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> 
<div>
<h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares
</a></h2>
<p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> 
<ul> 
<li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> 
<li><a href='/parts/volvo/'>Volvo Spare Parts</a></li>
<li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li>
<li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li>
</ul> 
</div>
</div>

The image stretches - it works fine on firefox and IE8.

The web address is www.wellandpower.net

There are 3 of these html elements on the left hand side of the page.

TIA

Regards

Charlie

Hi,
well i am using quicksand and in it i wanted to use tootips but no one on internet helped me by telling how to do so. So, i am now using css technique, the method is very simple css trick, when you hover over the game icons its details appear, and when you hover over the details then the details disappear. The details disappear in IE and firefox but it is not the case with google chrome.
here is the test page
http :// letseedrop.blogspot.com/2011/01/testing-8. html
i don't know what i am doing wrong, i also tried to use !important in css but it didn't helped.
well i am pasting css here too if you don't want to go into the source code
Code:

.demosa {
position:relative;
top:0px;
left:0px;
margin:0px;
padding:0px;
}

.gamedetailpara {
text-decoration:underline;
color:#000000;
}

ul.gamecolumns {
min-height:300px;
list-style: none;
margin: 0px;
padding: 0px;
}
ul.gamecolumns li {
background:url('(URL )) no-repeat;
position:relative;
display: inline;
width: 114px;
height:118px;
float: left;
margin: 8px;
padding: 0px;
}
ul.gamecolumns li:hover {
z-index: 99;
}


ul.gamecolumns li img {
position:relative;
top:12px;
left:12px;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=100)"; /*--IE8 Specific--*/
}
ul.gamecolumns li:hover img{
position:relative;
top: 12px;
left:12px;
z-index: 999;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=100)";
}

ul.gamecolumns li .gamedetails {
position: relative;
left: 0px; top: 0px;
padding: 20px 4px 10px 10px;
display:none;
background:#ffffff;
font:bold 13px "Times New Roman", Times,sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 99999;
}

ul.gamecolumns li .gamedetails:hover {
display:none;
}

ul.gamecolumns li:hover .gamedetails {display: block;}

ul.gamecolumns li:hover .gamedetails:hover {display: none;}

thank you in advance.

http://www.bath.ac.uk/~su2photo/test.php

i've been playing around with the css, trying to get the page to display properly, and i get something which i'm reasonably happy with in firefox, but as always when cross checking, ie drops the ball.

this time however, the the difference doesn't seem to be consistent . The two boxes you see, should both have titles flush to the top of their containers. In ie, only one seems to manage this.

html:

PHP Code:
<div id="menubox">

&#65279;<div class="topic">
<h3>Menu</h3>
</div>

<div id="menubody">

<ul>

<li><a href="index.php?s=1">Introduction</a></li><li><a href="index.php?s=2">Organisation</a></li><li><a href="index.php?s=3">Galleries</a></li><li><a href="index.php?s=4">Communication</a></li><li><a href="index.php?s=5">Equipment</a></li>
</ul>

</div>
</div>

<div id="mainbox">

<div class="topic">
<h3>Introduction</h3>
</div>

<div id="main">

<p>

Text

<br /><br />

Text

</p>

</div>

</div> 





css:
PHP Code:
 html, body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #FFF;
    background-color: #000;
    text-align: center;

}
#logoimg{
    border: 0px;
    width: 90px;
    height: 90px;
}
div#container{
    position: relative;
    top: 50px;
    margin: 0 auto;
    text-align: left;
    width: 900px;
}
div#mainbox{
    float: left;
    padding-bottom: 15px;
    border: 1px solid #290000;
    background-color: #130000;
    width: 630px;
    text-align: center;
}
div#menubox{
    float: right;
    border: 1px solid #290000;
    background-color: #130000;
    width: 230px;
    text-align: center;
}
div#main{
    margin: 0 auto;
    width: 600px;
    text-align: left;
}
div#menubody{
    margin: 0 auto;
    width: 200px;
    text-align: left;
}
div.topic{
    text-align: left;
    background-color: #290000;
}
h3{
    padding-left: 10px;
    margin-top: 0;
}
ul{
    list-style-type: none;
    text-align: left;
} 





this one's got me fuzzled, any idea? (if my whole technique is all wrong, then can you suggest a better way?)

cheers guys

(I apologise for the length of this , i did attempt to cut it down )

My site has two areas that display a similar looking menu. It's just horizontal links for home, blog, shopping cart, etc. I think it uses a list to display these.

My question is if you look the following link, the horizontal menu links at the top display instantly.
easylinuxcds.com/blog

On this second link they bunch up the the left for a second then spread out into the proper horizontal format.
easylinuxcds.com


How can I prevent this and have both pages look like /blog?

Thank you for reading - Andrew

I just made some css changes on my site yesterday to redesign some pages, and I can't tell if it's all messed up in internet explorer or not. I'm a mac user but I always borrow my roommate's computer to check changes in IE. However, I'm now having an issue where internet explorer doesn't seem to want to show the latest changes, and it even seems to move stuff around into different places when I refresh the page. I tried one solution that didn't seem to do anything, which was changing the option of "check for newer versions of stored pages" under IE Internet Options from "Automatically" to "Every Visit to the Page". The layout of the website looks fine in safari/chrome/firefox and also looks fine on firefox on the PC. I can't think of any other reason why internet explorer would be acting so strange by not showing the latest version and often changing when I refresh the page.

reflectionstour.com
^ Site I am working on.

So I have these nice little gifs that are curving the corners. In FF3 they work fine and it is XHTML/CSS 2.1 valid. Which of course means that they are not working right in IE 7 (haven't bothered testing 8, as I run Linux and it is hard enough to locate an IE7 to test it on.)

So I have tried a few different searches and don't really know what to even call it. And no webdev tool bar on IE to help tell me.

"vertical-align: bottom IE7 ~padding"
"bottom padding issues IE7"

I would rather not do separate CSS sheets as it is a simple site, there shouldn't be an issue here.

Thanks!
Wil

Hi all!

I have just started a not so small project converting my layouts to EM units. I have got so far and have a nav menu based on nested lists.

(This code was saved by ie and then formatted cleanly for inclusion here, so please ignore the capitals for tags and lack of quotation marks).


Quote:
<DIV id=topNav>
<UL id=nav>
<LI class=long><A class="firstParent selected" href="http://www.wellandpower.net/" alt="Diesel Generator Sets">Generator Home</A></LI>
<LI class=long><A href="http://www.wellandpower.net/index.php?wwwreq=www_products">Generator Products</A>
<UL>
<LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_products">Generator Product Range</A></LI>
<LI><A href="http://www.wellandpower.net/gallery/">Generator Image Gallery</A></LI>
<LI><A href="http://www.wellandpower.net/perkins_diesel_generator/WP150/index.php?wwwreq=www_certification">Generator Certifications</A></LI>
</UL>
</LI>
<LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_services">Services</A></LI>
<LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_about">About Us</A></LI>
<LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_contact">Contact Us</A></LI>
<LI class=short><A href="http://www.wellandpower.net/perkins_diesel_generator/WP150/index.php?wwwreq=www_support">Support</A>
<UL>
<LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_support">Generator Support Page</A></LI>
<LI><A href="http://www.wellandpower.net/forums/" target=_blank>Diesel Generator Forums</A></LI>
<LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_support_spares">Diesel generator Spare Parts</A></LI>
<LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_links">DieselGenerator Support Links</A></LI>
</UL>
</LI>
<LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_tracking">Tracking</A></LI>
<LI class=right><A href="http://www.wellandpower.net/wpmm-online3/index.php">WPMM Home</A></LI>
</UL>
</DIV>



The nested list works perfectly when then font-size in the browser is set to medium or smaller. When it gets larger, it all seems to get bigger with no problem, except I get the menu "about us" shifting down about 0.3em or so.

I tried deleting the "about us" menu, and the same effect happened but with the next menu along.

I am 100% stummped where this extra space appears from!? Any ideas greatly appreciated.



Quote:
#topNav {font-size: 0.8em; background-color:#000066;position:relative;z-index:1000;margin:0;padding:0;height: 1.5em; }
#topNav ul {padding:0em;margin:0em;list-style:none;background-color:#000066;}
#topNav ul li {display:inline;position:relative;float:left;white-space:nowrap;}
#topNav ul li.topNavRBorder {border-right:0.05em solid #ffffff;}
#topNav ul li.short {width: 8em; border: 1px solid black;}
#topNav ul li.long {width: 11em; border: 1px solid black;}
#topNav ul li.right {float: right; width: 8em;}
#topNav ul li ul li {width: 18em; z-index: 5000;}
#topNav ul li a {z-index: 5000; border-left:0.05em solid #ffffff;padding:.3em 0.5em .3em 0.5em;height: 1.5em;display:block;text-decoration:none;color:#fff;background-color:#000066;white-space: nowrap;}
#topNav p{padding:.3em 0.05em .3em 0.05em;height:0.1em;display:block;text-decoration:none;color:#fff;background-color:#000066;white-space: nowrap;}
#topNav ul li a.firstParent {border-left:none;}
#topNav ul li a.firstChild {border-top:0.05em solid #ffffff;}
#topNav ul li a:hover {color:#99ccfb;text-decoration:none;}
#topNav ul li ul li a {border-right:0.05em solid #ffffff;border-bottom:0.05em solid #ffffff;}
#topNav li ul {position:absolute;display: none;}
#topNav li:hover ul, #topNav li.displayBlock ul {display:block;}
#topNav ul li a.selected {color:#99ccfb;}

I'm including some images within a UL. I've coded them in there to float. IE displays the list as I want but NN and Opera won't play along. In fact they both "get it wrong" in different ways. What am I doing wrong? (as you can see it is for a course and it is important to me to get it right not just good enough).

Here's the address. The CSS coding is on the actual page for easy viewing.

link

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.

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

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

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>

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'?