Layout breaks on hover

[rubbed]

I have ABSOLUTELY no idea how to fix this problem

1. When I hover over an image I have a css style to remove the border.
If you hover over the 4th image the whole layout breaks.

2. When I hover over an image, the text underneath won't stay static, it will move with it.

3. The rating DIV won't display under the Price div, but instead beside it.

If anyone can look through my code and see what is wrong I would really appreciate it.

I have tried adding random overflow:hidden and clear:both to all the divs using trial and error for a solution but nothing worked.

* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; background: grey;}

article, aside, figure, footer, header, nav, section { display: block; }

#s_offers { /* container */ 
width: 620px;
margin: 20px 10px 10px 40px;
}

#s_offers h3 {
color:white;
text-indent:240px;
}

.s_offers_header{
width: 620px;
min-height:30px;
background-image: url(images/header.png);
}

.s_offers_box{
width: 618px;
height:auto;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 60%, #cdcccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#ffffff), color-stop(100%,#cdcccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 60%,#cdcccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 60%,#cdcccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 60%,#cdcccc 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 60%,#cdcccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cdcccc',GradientType=0 ); /* IE6-9 */
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
overflow:hidden;
}

.s_offers_cont{ /* product box */
float:left;
width:143px;
min-height: 130px;

padding: 10px 5px 20px 5px;
}

.s_offers_img{
width:140px;
background-color:white;
border: 1px solid grey;
}

.s_offers_img:hover{
width:140px;
background-color:white;
border: 0px solid green;
}

h4.s_offers_name{
font-size:14px;
color:black;
overflow:hidden;
margin-top:2px;
}

.s_offers_price{
font-size:11px;
text-align:left;
font-weight:bold;
color:grey;
height: auto;
float:left;
overflow:hidden;
}

.s_offers_rating{
font-size:10px;
overflow:hidden;
float:left;
}

.view-button{
background:red;
padding: 2px;
font-size:11px;
color:white;
font-weight:bold;
border: 1px solid black;
margin: 2px 2px 0 0;
float:right;
font-family:century gothic;
}

[edited by: alt131 at 5:08 am (utc) on Feb 25, 2012]
[edit reason] Thread Tidy [/edit]

[Weberic]

I also tried without success! I'm sorry :(

[alt131]

Hi rubbed, and welcome to WebmasterWorld :),

Can you explain what you mean by the layout "breaking" when you hover over the fourth image?

For your other questions.

2) I'm not exactly sure what you mean by the text "moving", but if it is just a couple of px that is likely caused by the browsers re-drawing the elements to take into account the lack of image border. One way to avoid this is to set a border on :hover. (Make it the same colour as the background so it is not noticeable.)

3) The rating and price divs are set to float:left. That means they will float left of content that follows. If you do not want this behaviour, remove the floats.

Also note that you have used the colour keyword "grey" <-- note spelling
I expect you mean "gray" <-- note the "a"

[rubbed]

Thank you!

I got it fixed.

I just added clear:left to the price div and it worked, but maybe I should take out the floats like you said.

The border trick worked, thank you very much!
Basically when I hovered over the 0px border affected everything underneath.


Can you take a look at this and tell me what you think of my coding, is there anything I can do to make it more simple and effective?

[edited by: alt131 at 7:43 pm (utc) on Feb 25, 2012]
[edit reason] Thread Tidy [/edit]

[alt131]

Hi rubbed, per the tos [webmasterworld.com] (see more details in the stickies I've sent) we don't do site reveiews. I'd encourage you to advertise in the Commercial Exchange [webmasterworld.com], or become a Supporter [webmasterworld.com] for site evaluations.

Clear:left worked because it (obviously) tells div.price not to float until it has cleared any element to it's left. However, what you've really done is order the div to float, then order it not to behave like a float. That's adding code to fix a problem caused by adding code ... Best practise is to use less code, not more, so unless you actually need float behaviour, best to remove it as you suggest.

[rubbed]

Hey,

I wasn't looking for a site review, I just wanted to see if I had any flaws in my coding.

It was only a header area, not even a complete site!

[alt131]

Hi rubbed, you are welcome to reply to the stickies I've sent, but per TOS #24 we prefer threads remain on-topic so avoid discussing policy in public forum. Can I suggest focus on the positive outcome that the code problems have been resolved, and you took the time to say thanks - something much appreciated by members who give up their free time to help others.

The place to start to eradicate "flaws in your coding" is to validate the html and css. As you are using vendor-specific extensions the css won't "pass", but it will identify any actual errors (like the use of grey rather than the keyword gray noted above).

Making code "more simple and effective" is a goal supported by many regulars here who will have lots of suggestions, but the basics are to start with are a full doctype so you are coding strict to reduce cross-browser inconsistency, and plan to conform to accessibility guidelines from the start. After that consider basic code efficiency like writing semantic HTML, taking advantage of the natural document flow, fully exploiting inheritance and the css cascade and writing efficient selectors. To help server-side set expires-by, compress and cache, combine externals like css and javascript and sprite images.

That's a bit to do to start, and of course post back with any questions.