First is a drop down menu issue when you use the drop down…
Hi,
That problem got started by the float on the .products ul li , a float without a width will shrinkwrap to the width of it’s content.
Then the problem got compounded by floating all the child elements too, the only one that needed a float was the img
Remove the floats from the LI, H2, and P and add text-align:left to the LI
.products ul li {
border-bottom:1px solid #CCCCCC;
display:block;
[COLOR=Red]/*float:left;/*---- remove this ---*/[/COLOR]
height:40px;
padding:10px 0;
[COLOR=Blue]text-align:left;/*--- add this ---*/[/COLOR]
}
.products h2 {
display:block;
[COLOR=Red]/*float:left;/*---- remove this ---*/[/COLOR]
font-size:16px;
margin:0;
padding:2px 0 3px;
}
.products p {
color:#666666;
display:block;
[COLOR=Red]/*float:left;/*---- remove this ---*/[/COLOR]
font-size:10px;
margin:0;
padding:0;
font-size:10px;
}
.products img {
[COLOR=Blue]float:left;[/COLOR]
padding-right:10px;
}
Second are these tiny white space on the bottom of the images
When using images in the html like that IE will give you whitespace at the bottom in it’s default state of vertical-align:baseline
The fix is to set it as vertical-align:bottom or change the img to display:block Set up a new selector to target that img and style it or better yet make them background images positioned at the bottom of the parent element with some bottom padding to show the image.
the warped text works in IE now but the menu its a little longer then in every other browser. Also the tiny white space vertical-align:bottom and display:block does not work. Could you possibly give me an example?
Also the tiny white space vertical-align:bottom and display:block does not work.
I didn’t notice you had them nested a mile deep in tables like that
You may have missed the whole point of CSS, take a look at all the inline styles and tables your using on that hosting plans page.
Now the content in your left column IS table data so that is fine. Everything in that right column does not really qualify as table data.
You might try setting a class on the images causing the whitespace, that way you can target them without effecting all the other images in your tables.
You also have IE in quirks mode because of an incomplete doctype, it is missing the referring url.
Wow lol putting the DTD makes everything all over the place.
That’s actually a good indicator of problems it’s causing while in quirks mode.
Make a version of that page with the DTD correction and post the link so we can see what it does.
Any way to fix it in the current mode?
Unless a table expert comes along with some trick that I’m not aware of the only thing I can suggest is putting a class on the problem images so you can target them only as I mentioned above.
We’ve been through this before and you can’t use a standards mode doctype because it breaks your whole page as it is built on quirks mode. There were just too many bugs to fix (e.g. you have no units on your inline styles which mean in standards mode they will be treated as zero).
If you remember way back I (and others since) gave you a standards based version right at the start but you had gone too far with this design to change and now you are stuck with what you have I’m afraid.
Note that the links to the images in your first post seem to be redirecting to your front page so I can’t see which images you are looking at specifically.
It worked but I have some question. I’m not starting over which is the best way now to optimize the code for the website?
Also I tried putting all my websites style tags in class tags but its showing all over the place not exactly how they look now. How come its not working?
Using CSS like this:
}
.class1
{
style information here
}
.class2
{
style information here
}
.class3
{
style information here
}