CSS - Ie/ff Display Issue

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

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

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,
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.

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;}

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

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

I've been seeing people using ul and li tags to make their menus in css.

So I've started trying to do the same, here is an example.

But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working?

How can I get this to work or is there any other way to get a ul li menu to display this way?

Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either.

http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm

WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE?



w w w. jaywayproductions . c o m/portfolio/work_history.html


It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated!

Hi!

Is is vicious to display a table as "display: block" to force margin-collapsing?

Otherwise there's no margin collapsing with other elements.

Thanks

Hello

I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this.

Second: In Firefox it looks like a disaster! Help!

http://www.tombraiders.net/katie/shelly/index.html

User: letme
Pass: in

Thank you!

Hello Guys,

I am trying to get the the css to work but having a hard time with it and need some help..

Here is the content lined up in fire fox.

http://content.screencast.com/users/dank2009/folders/Jing/media/4198ca5c-6c75-4196-a2e7-ba1c423caca7/2011-08-22_1550.png

Ad this is what it looks like in IE (See my issue)
http://content.screencast.com/users/dank2009/folders/Jing/media/c9f0dcd6-19c9-48f6-83f8-9c55d7417fcc/2011-08-22_1551.png

Here is the code

Code:

echo '<div class="listing"><img src="'.$listing_photo.'"><span class="listlink"><a href="index.php?content=subcats&id='. $listing_id.'">'.$listing_title2.'</a></span><br><span class="listbody">'.$listing_body2.'<span class="readmore"><a href="index.php?content=subcats&id='. $listing_id.'">&nbsp;&nbsp;Read more</a></span>>>></div>';

Here is the CSS
Code:

.listing {
	width:560px;
	height:auto !important;
	margin: 0 auto;
	text-align: left
}
.listlink {
    float:left;
    margin-left: 10px;
    margin-top: 20px;
    position: absolute;
    text-decoration:underline;
}

.listbody {
	float: left;
    margin-left: 110px;
    margin-top: -30px;
    width:440px
}

.listingdiv{
	border-bottom: 2px dotted #9EABB5;
	color:#FFF;
}

Please advise how to fix this..

Thanks for your help in advance..
Dan

Hi everyone,

For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine.

So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he

http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html

but I don't see what he did to solve it.

Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating .

I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions.

Thanks in advance if you can give a DIV newbie a heads up.
Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
  <style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
  </style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>