CSS - Display Full Width Ie Div Default Behaviour

Trying to delete my post but no option to delete so just removing content.

I'm trying to use image sprites to make images on my website switch to another image when the user hovers over them. These images are each placed in their own td that are set at different percentages within a 100% table.

The reason I need to use percentages is because I want the table and images to re-size to fit each individual computer screen. They do this beautifully, but when I add the image sprite, which has "display: block;" in its CSS, my images wont re-size. They just cut off.

Is there a way to use image sprites without the display: block code? Or is there a similar way to make images seamlessly grow and shrink to fit a browser without using a width percentage?

Thanks!

for some reason when i declare a div as "display: inline", the width is ignored. as soon as i take display: inline out, the width goes to what i set it to.

Code:

#jobs_list{
	background-color: #ffe6c4;
	padding: 5px;
	clear: both;
	overflow: auto;
	width: 600px;
}
#jobs_list .heading{
	width: 200px;
	display: inline;
}
#jobs_list .title{
	font-weight: bold;
	text-align: left;
}
#jobs_list .company{
	text-align: center;
}
#jobs_list .location{
	text-align: right;
}

<div id="jobs_list">
	<div class="heading title">Title</div>
	<div class="heading company">Company</div>
	<div class="heading location">location</div>
</div>

Okay i have been working on this for a while now, and i hate asking for help.. but i have given up on it.

Firstly i started using display:inline-block; which meant i could have a width so my hover over menu effect would work. But this did not work in IE7 which means it is useless to what i am doing.

So i then moved onto Display:inline; This worked fine, in both IE and Firefox, but the width cannot be set with this value. This value just wraps itself around the content. But i need to set a width to the Inline value.

Any help?


CSS:
Code:

#navcontainer ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { 
display: inline;
width: 65px;
height: 21px;
background: url("images/tabbg.gif") 0 0 no-repeat;
text-decoration: none;
text-align:center; 
}

#navcontainer ul li a{
display:inline;
width: 65px;
height: 21px;
background: url("images/tabbg.gif") 0 0 no-repeat;
text-decoration: none;
}

#navcontainer ul li a:hover{
background-position: -65px 0;
color:#FFFFFF;
}

html:
Code:

<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div> 

Also a link to the actual page is
http://www.therow2.com/adsense/zzzzzzzzzzzzzzz.php

Hi, can anybody help me stretch green buttons for Firefox just like they appear in IE? I'd greatly appreciate the help.

Please see the attached html.

Hi. Lets say I've a div with width:300px and then there're some user generated content (Example: aaaaaaaaaa.....) that was so long without any whitespace that exceed the lenght of the div.

Right now that word gone pass the right border of my div. Is there a way to style it so the word will not pass the right border and actually moved to the next line?

I was thinking about changing the div as display table but maybe I don't want to do that and not sure if that will do it as well. The reason I don't want to use display as table because it's not compatiable to older browser.

Is there any way to prevent this type of behaviour?

Thanks.

Hi guys,

I am building a page with CSS and I'm running into some problems with the CSS buttons I'm trying to use. Right now I have a large box along the top of the page and want two rows of buttons inside of it. These text on these buttons will likely be changing on a semi-regular basis. So instead of using gif buttons made in a graphics program, I'm using CSS to create the buttons. Since each row will have multiple buttons, I first used the display:inline; item and it worked fine in IE. In FF however, the buttons lost their height and width. If I also used the float:left; it worked right, but the buttons were not centered. In looking for a solution, I discovered that inline items cannot use the height and width properties. Any ideas on how to get what I'm looking for?

I can't post a link, because this is an intranet page, but here is my relevant code...

CSS Code:
Original - CSS Code /*the main box which will contain the buttons*/ div#Main-buttons { width:96%; margin:2%; margin-top:10px; height:100px; padding-top:10px; background-color:#84C394; border:ridge medium #004500; } /*adjustments for FireFox*/ html>body div#Main-buttons { width:90%; margin:5%; margin-top:10px; height:100px; padding-top:0px; background-color:#84C394; border:ridge medium #004500; } /*class for individual buttons*/ div#buttons { width:100px; height:30px; margin:3px; float:left; background-color:#F7F3B5; border-style:solid; border-width:2px; border-color:#ffffff; line-height:1.6; display:inline; } a.buttonLinks:link {color:#000000; text-decoration:none;} a.buttonLinks:active {color:#000000; text-decoration:none;} a.buttonLinks:visited {color:#000000; text-decoration:none;}

  

  


 /*the main box which will contain the buttons*/


 div#Main-buttons {


     width:96%;


     margin:2%;


     margin-top:10px;


     height:100px;


     padding-top:10px;


     background-color:#84C394;


     border:ridge medium #004500;


     }


 /*adjustments for FireFox*/


 html>body div#Main-buttons {


     width:90%;


     margin:5%;


     margin-top:10px;


     height:100px;


     padding-top:0px;


     background-color:#84C394;


     border:ridge medium #004500;


     }


     


 /*class for individual buttons*/


 div#buttons {


     width:100px;


     height:30px;


     margin:3px;


     float:left;


     background-color:#F7F3B5;


     border-style:solid;


     border-width:2px;


     border-color:#ffffff;


     line-height:1.6;


         display:inline;


     }


  


 a.buttonLinks:link {color:#000000; text-decoration:none;}


 a.buttonLinks:active {color:#000000; text-decoration:none;}


 a.buttonLinks:visited {color:#000000; text-decoration:none;} 

HTML Code:
Original - HTML Code <div id="Main-buttons"> <a href="#" class="buttonLinks"><div id="buttons">Testing</div></a><a href="#" class="buttonLinks"><div id="buttons">Testing</div></a></div>

  
<div id="Main-buttons">
      <a href="#" class="buttonLinks"><div id="buttons">Testing</div></a><a href="#" class="buttonLinks"><div id="buttons">Testing</div></a></div>

Thanks in advance guys!

I am sure there is an obvious explanation but why does using display:inline in this class definition stop the height/width working? Remove it and the dimensions are preserved.

PHP Code:
 DIV.special_offer_middle {
    width: 100px;
    height: 20px;
     display: inline;
    border: 1px dashed white;
 } 

Hi, all. I'm brand new to CSS and have run into my first speedbump. I've tried searching the forum already, forgive me if I missed a previously posted solution.

Today I put together a page at work and it looked correct in IE8 (which is the only browser we can use at work). When I got home, I discovered that it doesn't display properly in ANY other browser.

I've validated my code, and just can't figure out what the problem is.

(I tried to link to images here of what it should look like versus what it actually looks like, but apparently as a new user I'm not permitted to post URLs. I also don't seem to be able to insert images into this post, so if anyone would like to see the images, I guess I could email them to you.)

Can anyone tell me why the DIVs appear to be too long? Thanks in advance for any help.

Here is the HTML:

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="comp.css" />
</HEAD>
<BODY>

<div id="parent">

<div id="left_top">
</div>

<div class="bigcontainer" id="right_top">
a very<br>special<br>place<br>on the<br>internet
</div>

<div class="container" id="left_mid">
additional reading
</div>

<div class="container" id="right_mid">
tab one | tab two | tab three | tab four | tab five
</div>


<div class="container" id="left_bottom">
first link<br>
second link<br>
third link<br>
fourth link<br>
fifth link<br>
sixth link<br>
seventh link<br>
eighth link<br>
</div>

<div id="right_bottom">
<p>
Lorem ipsum dolor sit amet...
</p>
</div>

</div>

</BODY>
</HTML>


Here is the CSS:

body
{
font-family: sans-serif;
font-size: 10px;
margin: 0;
padding: 0;
background-color: #e5e5e5;
}

div.bigcontainer
{
font-size: 20px;
font-weight: bolder;
vertical-align: middle;
padding: 20px 20px 0px 0px;
text-align: right;
}

div.container
{
font-size: 12px;
font-weight: bolder;
vertical-align: middle;
padding: 10px 20px 5px 0px;
text-align: right;
}

#parent
{
margin: 0px;
padding: 0px;
position:relative;
}

#left_top
{
width: 35%;
height: 190px;
background-color: #7d7d7d;
float: left
}

#right_top
{
width: 65%;
height: 190px;
color: #ffcc00;
background-color: #666666;
float: right;
}

#left_mid
{
width: 35%;
height: 35px;
color: #ffff99;
background-color: #ffd426;
float: left;
}

#right_mid
{
width: 65%;
height: 35px;
color: #666666;
background-color: #ffcc00;
float: right;
}

#left_bottom
{
width: 35%;
height: 100%;
padding: 20px;
color: #999999;
text-align: right;
background-color: #e5e5e5;
float: left;
}

#right_bottom
{
width: 65%;
padding: 20px;
color: #666666;
text-align: right;
background-color: #ffffff;
float: right;
}

Hi,

I am trying to finish up on this cubecart re-skinning that I've been left with.

Basically, when you add products to the basket the style goes really long. It seems to work in ie7's compatibilty mode, but other than that I am at a bit of a lose as to why its doing it.

I am not much of a front end developer, so its all a bit foriegn. I can make my way around a css file, but this has me stumped as I cant see what is causing this!

Any help would be greatly appriciated.

The page is located at:

keylow-design.com/shop

Thanks in advance

Robert

Hello All,

I have created a grid using divs. There is a main div acting as a table, this contains divs acting as rows and these contain divs acting as cells. The finished thing resembles an HTML table.

When developing the grid, I managed to make it work correctly in all browsers and was happy with the result. Now that I have put the grid on a live server and there is a slight lag loading the page, I am having problems in FF3 and IE7.

When I first view the page, the divs are not sitting in a nice block, some of the rows end halfway through and new rows are started. If however I click refresh, the problem fixes itself. Also the alignment is random, I can view the same page twice in the same browser and get different results.

The first thing I thought was that there must be something wrong with my coding, but the HTML and CSS never change.

I cannot send a link to the page as it is on an intranet, also the code is quite long so I did not include it but I will if necessary.

I have looked around on the net for similar problems and have found one or two mentions but no solutions.

Has anyone else had a problem like this and solved it? Any help would very much be appreciated.

Thank you,

Aaron.

I have a strange problem in IE7

I have a div containing an image (left float) with a second div nested inside the first, containing text which should sit to the right of the image. It looks fine in firefox, chrome and IE8 but in IE7 the text drops down to the bottom right of the image.

I cant post links to screen shots sorry

any suggestions?

I thought that setting properties for a and a:hover like this:

PHP Code:
 a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #960000;
    text-decoration: none;
    border-bottom: 1px dashed #960000;
}
a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px dashed #FFFFFF;
} 





would apply a dashed bottom border to a standard link (which it does, marvellously). I also thought any other a classes would override this. Such as:

PHP Code:
 a.nav {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #960000;
}
a.nav:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
} 





Which doesn't work (until I set a border-bottom property of 0). Is there a way to get around this so I don't have to set a 0 bottom-border on all other link types?

I have a basic 2 column layout with a header and the columns reprezented by two floated divs but on IE I'm experiencing some weird behaviour with the menu. To be precise the menu's background and content is not showing up at pageload and I have to hover some of it's elements or resize the window, or bring another window above IE's window and then the hidden elements magically appear. Is this some common bug? And more important: is there a fix?

You can see my example at the following link -> http://www.link7.ro/misc/css-stuff/bug1/test.html

Thanks in advance.