CSS - Browser Display Issue With Percentages Vs. Fixed Width

Hi all,

I've got a problem with CSS, and while I usually can fix them myself, I can't seem to find a solution to this one.

I want to create a centered block with a dynamic width using almost nothing but CSS (except for the div in the HTML code). Not specified by percentages, but instead specified by the distance from both the left and the right border of the block to the body.

So what I want is to specify the left and right properties of the DIV, so my first attempt was:

Code:

#block {
    position: absolute;
    top: 40px;
    right: 40px;
    left: 40px;
    height: 40px;
}

In Opera and FireFox it worked fine, but in Internet Explorer the block had no width.

Does anyone know of a way to accomplish this?

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

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, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help.

My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off...

The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view!

My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance....

i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width.
The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu.

here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu.
http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm

Also , i get wierd result in netscape navigator. please help