CSS - Overlapping Div Display Issue

not sure where to go with this. I'm not a great CSS developer by any means. but this is killing me.

I'm working on two sites. I've created a login box that changes to member links once logged in. but the box display is not working correctlly.

In FF it looks right. but in IE it adds a space below the h2 line. I've set margin and padding to 0 on this and it doesn't seem to matter.

Any thoughts?

FYI this site is in dev. if you click the member pages you'll see data. on the filter pages there are NSFW words in the list. I've not yet set the permissions so that guests can't see the sample data.

the site URL is:
15.e-referrer.com/cms

Any help is greatly appreciated.

EDIT: Sorry, had to remove the hyperlink code. can't post urls as a new user. 3 years later

Hey everyone,

The page below displays perfectly in both IE6 and Firefox, but in IE7 my navigation disappears and the right navigation in the header is all crunched together.

livedifference dot com slash test slash home

I'm not really a CSS guru, but I've tried clearing floats via tons of methods and adding random things, but nothing seems to work. Any help would be GREATLY appreciated, I really need to get this up and running.

Thanks,

Brad

Hello,

I am having a problem with a client's site that I am sure is a CSS wrapper issue. It's happening in IE 7 for me - that is the version I have. It displays fine in Firefox, Opera & Netscape.

I would give the link but am not allowed as a new user so I will describe what is happening. When viewing with IE the header starts 1/2 way down the page and the top of the page displays only the body background. If you refresh a few times "most of the time" it will right itself.

Here is the CSS code I used:

body {
background: #240000 url(images/bg3.jpg) repeat-y center top;
margin: 0;
padding: 0;
color: #CC9933;
}
#Wrapper {
background:#240000 url(images/lbg.jpg) no-repeat scroll center top;
height:399px;
margin:0 auto;
width:100%;
}

Admittedly I do not use CSS in it's pure form. My pages are still table-based layouts and not entirely W3C compliant. I am doing my best to learn how to ditch the tables but in the meantime I still have sites to complete and old habits die hard. I only design as a sideline and for a niche market. So I don't mean to offend any of you who are doing it the right way.

This is the first time I have attempted a double background using the wrapper so any help is greatly appreciated.

Thank you so much for your time!

K

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.

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

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

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

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

Hi folks,

Can anyone possibly help me with this layout, the blue slideshow box is overlapping the login box ?

~url removed~

Also, I am viewing this at 1440x900 screen res. Is anyone having probs with the view / layout?

been trying to get this to work for a while now , but have had no luck, this works fine in IE but firefox seems to overlap my footer div. http://www.urbandream.net/mms/common/layout/site.html

if anyone could help or point me in the right direction I owuld be greatful.

Also if anyone is on a mac, I owuld be greatful of a screen shot to see how it looks.

scott