CSS - Table Rows Not Evenly Distributed In Chrome

I have a menu within my content thus:

Code:

div class="contentMenu">
<ul>
<li>
<a href="#" title="Find out more"><img src="images/stories/memories/FamilyLife/thumb/familyFWHarveysBuildingsDorchester.jpg" alt="" />
<span>Family life</span></a>
</li>
.
.
.
<li>
<a href="#" title="Find out more"><img src="images/stories/memories/SightsAndSounds/thumb/sightsMOOsmington1963.jpg" alt="" />
<span>Sights/Sounds</span></a>
</li>
</ul>
</div>

I want the menu items not to spill onto the next line when I shrink the browser. I have tried overflow:hidden; but does not stop the last one taking up a new "line". There are 7 menu items across the page. The CSS so far is:

Code:

.contentMenu {
background-color:#FFFFCC;
border:1px solid #B9C0F7;
margin-bottom:6px;
padding:8px 0 5px;
}
#main .contentMenu ul, #main2 .contentMenu ul {
margin:0 auto;
overflow:hidden;
width:95%;
}
#main ul, #main2 ul {
list-style-position:outside;
list-style-type:square;
margin:0 0 0 20px;
padding:10px 0;
}
#main ul li, #main2 ul li {
margin:0;
padding:0 0 0 10px;
}
.contentMenu li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
text-align:center;
width:15%;
}
.contentMenu a {
padding-top:4px;
text-decoration:none;
}
.contentMenu img {
border:medium none;
height:62px;
width:55px;
}

Of course the meni images need to be evenly spaced across the page. Would appreciate if someone could point me in the right direction.

Alright, here's the situtation:

Imagine a bunch of random DIVs... let's say a hundred. These DIVs come in three different widths, but their heights are entirely variable. Now, let's give these DIVs margins of 5px each. I want all of the DIVs to show up, in their respective dimensions, in order as much as possible... but I want them all 10px apart from all sides... including top and bottom.

How would I achieve this effect? I tried floats, but that doesn't quite work for EDIT* - vertical spacing in all cases. Basically, if a smaller DIV can fit in an empty space, I want it to go there, so everything--despite the randomness--is uniformly spaced.

Is this possible using CSS? Maybe with Javascript?

Hi folks,

I hope this is achieveable ... I have tried numerous ways of floating and whatnot, here is what i want:
I want to have one container, having 3 divs inside. of these 3 divs the left and the right one are fluid, the center one is an image with a fixed width. looking like this:
Code:

________________________
l                       l
l  fluid  fix   fluid   l
________________________

restrictions:
i do not want to use positioning at all. best would be, if it is all achieved with float and margins, looking good in IE and FF ....

i have a page up, that will show you my design .... note, that only the box containing the image is the problem part on that page (some of you will recognize this i believe) the names of the classes are textboxleft, textboxright and id big_logo

thanx!
i want to redesign the page i have to only be displayed with floats and margins and no more positioning ....

Hello! Im Using Joomla to build my website. Im using a module and im changing the css styling. There only one problem im having. The tabs on the module align to the left and because i dnt have enough tabs to fill out the space it leave a blank space on the right.

I just want to know how to edit the CSS to make the taps justify / spread out evenly. The makers of the module say any question on customization will be ignored that why i post this question here to see if i could get some help. Its "Tabs Manager GK3" from Gavick

Heres the CSS. Can any1 just make the changes for me please and post it below Thanks in advance!

Code:

.clearfix-tabs{
clear: both;
}

.gk_tab_item_space{
padding: 10px;
}

div.gk_tab-style3 {
position: relative;
}

div.gk_tab_wrap-style3 {
margin: 0 auto;background: #171717;
border: 4px solid #822864;
}

div.gk_tabmenu-style3 {
overflow:hidden;
}

ul.gk_tab_ul-style3 {
list-style-type: none;
margin: -1px 0 0;
padding: 0;
}

ul.gk_tab_ul-style3 li {
background: none;
padding: 0;
float: left;
cursor: pointer;
margin: 0;
position: relative;
}

ul.gk_tab_ul-style3 li span {
background: url('../../images/horizontal/style3/bg_tab.png') repeat-x 0 0;
display: block;
height: 28px;
line-height: 27px;
padding: 0 10px;
font-size: 10px;
color: #000;
text-transform:uppercase;
border: 1px solid #e1e1e1;
border-left: none;
}

ul.gk_tab_ul-style3 li.active span {
background: url('../../images/horizontal/style3/bg_tab-active.png') repeat-x 0 0;
color: #171717;
border: 1px solid #b32784;
}

div.gk_tab_container0-style3 {
clear: both;
}

div.gk_tab_container1-style3 {
overflow: hidden;
}

div.gk_tab_item-style3 {
float: left;
overflow: hidden;
padding: 10px;
}

div.gk_tab_button_next-style3,
div.gk_tab_button_prev-style3 {
width: 24px;
height: 24px;
background: url('../../images/horizontal/style3/b_next.png') no-repeat 0 0;
cursor: pointer;
position: absolute;
top: 43%;
right: 0;
}

div.gk_tab_button_prev-style3 {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 0 0;
left: 0;
right:inherit;
}

div.gk_tab_button_next-style3:hover {
background: url('../../images/horizontal/style3/b_next.png') no-repeat 100% 0;
}

div.gk_tab_button_prev-style3:hover {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 100% 0;
}

.gk_tab_container0-style3,
.gk_tab_container1-style3,
.gk_tab_container2-style3{
position:relative;

}

Thanks for taking the time to read my question.

I'm having to update a site I did a while ago, and am now quite out of practice, as I've done nothing since. I made the site before Chrome was released, and now, since I'm updating it, would like to make sure it displays properly in Chrome as well.

I have buttons for my top nav, that when you hover over them increase in size. The text on the button is not a part of the image. The text in question is "Contact Us" in FF and IE the text wraps after Contact, with the Us underneath it. In Chrome it stays on one line. If I decrease the size of my <div> by one pixel the text wraps in Chrome. I can't do that though as it shaves off one pixel of my button image.

I can't seem to find a site that will tell me what the difference is between Chrome IE and FF.

Here is my css and html for my nav if it helps.

attached is a pic of the difference. The red is to sho the navcontainer div. Notice the difference in the Contact Us button.

Thanks,

Brad

HTML:
Code:

<div id="navcontainer">
        	<ul>
              <li class="Active OneLineAct">Home</li>
              <li class="NotActive1 OneLine"><a href="ZoneAll-Products.htm">Products</a></li>
              <li class="NotActive1 TwoLine"><a href="ZoneAll-ContactUs.htm">Contact Us</a></li>
              <li class="NotActive2"><a href="wadsz3000.htm">Wiring Diagrams</a></li>
              <li class="NotActive1 TwoLine"><a href="stahr.htm">What&rsquo;s New</a></li>
              <li class="NotActive2"><a href="application.htm">Sample Specs</a></li>
              <li class="NotActive2"><a href="tshooting.htm">Trouble Shooting</a></li>
            </ul>
        </div>

CSS:
Code:

#navcontainer ul
{
margin: 10px 8px 0px 0px;
padding: 0px;
/*background-color: transparent;*/
background-color:red;
color: #000000;
width: 728px;
font-family:Arial, Helvetica, sans-serif;
float: right;
}

#navcontainer ul li
{
display: inline;
}

#navcontainer ul li.Active {
text-decoration: none;
text-align: center;
float: left;
width: 104px;
height: 70px;
background-image:url(Images/BigBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
/*letter-spacing: .1em;*/
/*padding: 20px 0px 0px 0px;*/
margin: 0px 0px 0px 0px;
font-size: 22px;
}

#navcontainer ul li.OneLineAct{
padding: 20px 0px 0px 0px;
}

#navcontainer ul li.TwoLineAct{
padding: 10px 0px 0px 0px;
letter-spacing: .11em;
}

#navcontainer ul li.NotActive1 a {
text-decoration: none;
color: #000000;
text-align: center;
float: left;
background-image:url(Images/SmallBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
width: 79px;
height: 53px;
margin: 10px 12px 0px 13px;
font-size: 14px;
}

#navcontainer ul li.NotActive2 a {
text-decoration: none;
/*color: #000000;*/
color:#990000;
text-align: center;
float: left;
background-image:url(Images/SmallBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
width: 79px;
height: 53px;
letter-spacing: .1em;
margin: 10px 12px 0px 13px;
padding: 12px 0px 0px 0px;
font-size: 14px;
}

#navcontainer ul li.NotActive1 a:hover {
text-align: center;
background-image:url(Images/BigBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
text-decoration: none;
/*letter-spacing: .1em;*/
width: 104px;
height: 70px;
margin: 0px 0px 30px 0px;
font-size: 20px;
float: left;
}

#navcontainer ul li.NotActive2 a:hover {
text-align: center;
background-image:url(Images/BigBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
text-decoration: none;
/*letter-spacing: .1em;*/
width: 104px;
height: 70px;
margin: 0px 0px 13px 0px;
padding: 8px 0px 0px 0px;
font-size: 20px;
float: left;
}

#navcontainer ul li.OneLine a{
padding: 18px 0px 0px 0px;
}

#navcontainer ul li.TwoLine a{
padding: 12px 0px 0px 0px;
letter-spacing: .11em;
}

#navcontainer ul li.OneLine a:hover {
padding: 20px 0px 0px 0px;
}

#navcontainer ul li.TwoLine a:hover {
padding: 10px 0px 0px 0px;
}

I have a layout that seems to work in IE8, but throws Chrome for a loop. Something tells me that it working in IE8 is a bad sign...

In IE8 the bottom of the screen and the div have a space between them. In Chrome, they are butted up against each other, and the coloring between the footer (I think) and the bottom of the screen is blue (where it should be cream).

Have not tested in FF, I would assume the same issue.

Thanks ahead of time for the help,

-Gnome101


CSS
Code:

html {
   margin:0;
   padding:0;
}
body {
   background-color:87CEFA;
   margin-top:35px;
   margin-bottom:10px;
   
}
#container {
   background-color:FAF0E6;
   left:15px;
   width:60%;   
   height:100%;
   position:relative;
   border-bottom:1px solid black;	
}
#header {
   width:100%;  
   background-color:87CEFA;    
   padding:0px;
}

#footer {
   position:absolute;
   bottom:10px;
   width:100%;
   height:25px;
}

#content{
   width:100%;
   border:1px solid black;
}

Page - I know there are blank spaces, but I am doing this in Lotus/Domino...so the blanks are filled with html...

Code:

<div id="container">
	<div id="header">...</div>
	   <div id="content">...			
	
	      <div id="managerArea">
		...
	      </div>
          </div>
   <div id="footer">
	...
   </div>
</div>

Okay this is kind of blowing my mind. Here is my CSS:

Code:

body
{
    margin: 0px;
    text-align: center;
}


table
{
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;

}

td
{
    padding: 0px;
    vertical-align: top;
}

td.banner
{
    background-image: url("images/design/BANNER_TOP_LEFT.jpg");
    background-repeat: no-repeat;
    width: 597px;
    height: 70px;
}

td.map
{
    background-image: url("images/design/MAP_BACKGROUND.jpg");
    background-repeat: no-repeat;
    width: 203px;
    height: 199px;
}

td.content
{
    height: 100%;
    background: red;
}

here is my XHTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
        <script type="text/javascript">



        </script>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

<table width="800">
    <tr>
        <td class="banner">
            <div id="login">
                <p>
                Hello
                </p>
            </div>
        </td>
        <td rowspan="2" class="map">
            <p>Hello</p>
        </td>
    </tr>
    <tr>
        <td class="content">
        <div id="contest">
        <p>Hello</p>
        </div>
        </td>
    </tr>
</table>


    </body>
</html>

Here is what it looks like in each brower (attached). I want every browser to look like it does in Chrome.... I don't understand why the others are different? Thanks... (haven't been at developing for a while).

[sorry if this does not belong in this forum]

Google's browser arrives Tuesday...anyone heard how the CSS support for this is?...Microsoft says that their new IE8 (now available in beta) is their most CSS compliant to date (for them, but that's not saying much)

Google's "Chrome" launches tomorrow...


Google's "Chrome" web browser

Hi all, ive got a problem that only seems to be happening in google chrome, if you look at

http://roksportsurf.co.uk/acatalog/Mens_Billabong_Tee_Shirts.html

the red circles with the price in are out of position on first load, but if I refresh the page they are in the correct position.

Ive tried IE and Firefox and they display fine there, even safari works ok.

any ideas what could be causing it?

We've set up a CSS / Javascript dropdown menu which works fine in all browsers (even Opera, amazingly) EXCEPT Chrome- does anyone have an idea why? Is Chrome particularly bad with this sort of code?

The CSS for the menu is as follows:

.jqueryslidemenu{
font: bold 12px "Arial Unicode MS", Arial, sans-serif;
background: #6666cc;
width: 97%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #6666cc; /*background of tabs (default state)*/
color: white;
padding: 9px 25px;
border-right: 1px solid #fff;
color: #2d2b2b;
text-decoration: none;
border-left:0px;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: #33cc66; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 12px "Arial Unicode MS", Arial, sans-serif;
width: 120px; /*width of sub menus*/
float:left;
padding: 10px 20px 10px;
margin: 0;
border-top-width: 0;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
border-bottom: 1px solid white;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}


And it uses the following Javascript file:

var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}

var jqueryslidemenu={

animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimens ions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if ($targetul.queue().length<=1) //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqu eryslidemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration. out)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}

//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)


And lastly, the menu is placed in pages as follows (example):

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li class="mainmenu"><a href="index.htm">Home</a></li>
<li class="mainmenu"><a href="news.htm">News & Events</a></li>
<li class="mainmenu"><a href="products.htm">Products & Services</a>
<ul>
<li class="menu"><a href="#nogo">New Products</a>
<ul>
<li class="menu"><a href="clinaxysdetails.htm">Details</a></li>
<li class="menu"><a href="clinaxystrials.htm">Trials</a></li>
<li class="menu"><a href="clinaxyssafety.htm">Safety</a></li>
<li class="menu"><a href="instruments.htm">Instruments</a></li>
</ul>
</li>
<li class="menu"><a href="installation.htm">Installation</a></li>
<li class="menu"><a href="training.htm">Training</a></li>
<li class="menu"><a href="maintenance.htm">Maintenance</a></li>
<li class="menu"><a href="usergroup.htm">User Group</a></li>
</ul>
</li>
<li class="mainmenu"><a href="#nogo">Quality</a>
<ul>
<li class="menu"><a href="qualitypolicy.htm">Policy</a></li>
<li class="menu"><a href="qualitycert.htm">Certificate</a></li>
</ul>
</li>
<li class="mainmenu"><a href="customers.php">Customer Area</a></li>
<li class="mainmenu"><a href="contacts.htm">Contacts</a></li>
<li class="mainmenu"><a href="login.php">Log In</a></li>
</ul>
<br style="clear: left" />
</div>


Works fine in everything we've tried, apart from Chrome...????

I am a complete novice and have helped someone with their website. All fine in IE but the sub menus do not work in Chrome?

If you hover over Domestic Services (for example) in the main menu which runs down the left of my web site a sub menu appears to the right in IE (I have version 7) but not in Chrome (which I've just downloaded so I have the newest version). It all works just as I want it to do in IE7.

Is this a Chrome issue or more than likely I have done something wrong. Can anyone help me, sorry I have tried but I can't see what I've done wrong. Thanks for any help - Lindsay.

Here is my CSS

/* Menu properties */


#left-menu{
width:210px;
height:265px;
border-left:#474843 19px solid;
background-color:#171717;
padding:30px 0px;
}
#left-menu ul {
margin:0;
padding:0;
list-style:none;
}
#left-menu ul li {
margin:0px;
padding:0px;
height:20px;
line-height:20px;
}
#left-menu ul li a{
font-family:Tahoma, Verdana, Arial, sans-serif;
font-size:12px;
font-weight:normal;
text-decoration:none;
color:#D7D7D7;
background:url(images/left-menu.gif) 26px 5px no-repeat;
padding-left:47px;
}
#left-menu ul li a:hover{
background:url(images/left-menu-hover.gif) 26px 5px no-repeat;
text-decoration:underline;
color:#CC0000;
}



#left-menu ul ul {
position: relative;
top: 0;
display:none;
margin:0;
padding:0;
}
#left-menu ul li ul li {
}

#left-menu ul li ul li a:hover{
}

#left-menu ul li:hover ul{
display: block;
position:absolute;
top:325px;
padding-right:50px;
padding-top:5px;
padding-bottom:5px;
border-right:#474843 19px solid;
border-left:#474843 2px solid;
border-top:#474843 2px solid;
border-bottom:#474843 2px solid;
background-color:#171717;
}





And here is the HTML

<ul id="left-menu">

<li><a href="../index.html">Home</a></li>
<li><a href="../domestic.html">Domestic Services</a>&nbsp; <img src="../images/arrow_r.gif">
<ul>
<li><a href="../domesticglass.html">Window & Glass Care</a></li>
<li><a href="../domesticextbuilding.html">Exteriors of Buildings Cleaned</a></li>
<li><a href="../domesticdecking.html">Path Decking & Patio Cleaning</a></li>
<li><a href="../domesticconservatory.html">Conservatory Valeting</a></li>
<li><a href="../domesticgutter.html">Gutter, Soffit & Fascia Cleaning</a></li>
</ul>
</li>



<li><a href="../commercial.html">Commercial Services</a>&nbsp; <img src="../images/arrow_r.gif">
<ul>
<li><a href="../commercialglass.html">Window & Glass Care</a></li>
<li><a href="../commercialgutter.html">Gutter & Fascia Cleaning</a></li>
<li><a href="../commercialextbuilding.html">Exteriors of Buildings Cleaned</a>&nbsp;&nbsp;&nbsp; </li>
<li><a href="../commercialsign.html">Sign Cleaning</a></li>
</ul>
</li>




<li><a href="../quote.html">Quotations</a></li>
<li><a href="../waterfedpole.html">Water Fed Poles</a></li>
<li><a href="../health.html">Health and Safety</a></li>
<li><a href="../faq.html">FAQ</a></li>
<li><a href="../photos.html">Photo Gallery</a></li>
<li><a href="../aboutus.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
<li><a href="../links.html">Links</a></li>
</ul>

Hi,

Thanks for your time...

If you visit this site with IE7, http://demo.wp4re.com, you should see a big gap just beneath the main menu and the house photo and blue back gradient background. This looks fine in FF3 and Chrome, so you can see how it's meant to look with either browser.

Any idea what's causing this?

PS - The xhtml doesn't validate (2 errors), but it's it's not the issue as I already tried removing the culprits yet it didn't affect the gap. I've since put the code back in.

Thanks in advance.