Help With Display: Block Vertical Spacing Please

uqwebdesign · June 7th, 2006, 07:58 PM

I'm currently helping out a guy customise his shopping cart template. It's going fine but it was previously done by another guy who's left everything in a mess, everything uses tables which I don't use etc etc

It can be seen here
http://gbfitness.net/uq/default.asp

The problem I have is with the menu on the left. The way I currently have it it displays perfect in Firefox, but in IE has too much vertical spacing. I'd tried using position: realtive and using a negative top margin but it won't seem to work. If I take off the display: block and play around a bit more I can get it to work fine in IE, but in Firefox the widths don't work, the background only goes as wide and long as the text is.

Has anyone please got any suggestions so this will work in both browsers please? It's driving me crazy!

Here's the CSS code:
A.prodtypemenu1:link {display: block; float:left; margin-top:5px; padding:0px; text-decoration: none; color: #f5f5f5; font-weight:bold; font-size:13px; height: 18px; width:130px; background-color: red; border: solid 1px; border-color: red;}

A.prodtypemenu1:visited {display: block; float:left; margin-top:5px; padding:0px; text-decoration: none; color: #f5f5f5; font-weight:bold; font-size:13px; height: 18px; width:130px; background-color: red; border: solid 1px; border-color: red;}

A.prodtypemenu1:hover {display: block; float:left; text-decoration: none; margin-top:5px; padding:0px; color: red; font-weight:bold; font-size:13px; height: 18px; width:130px; background-color: #f5f5f5; border: solid 1px; border-color: red;}

A.prodtypemenu2:link {display: block; float:left; padding:0px; text-decoration: none; color: red; width:130px; margin-top:-10px; background-color: #f5f5f5; border: solid 1px; border-color: red;}

A.prodtypemenu2:visited {display: block; float:left; padding:0px; text-decoration: none; color: red; width:130px; margin-top:-10px; background-color: #f5f5f5; border: solid 1px; border-color: red;}

A.prodtypemenu2:hover {display: block; float:left; padding:0px; text-decoration: none; color: #f5f5f5; width:130px;margin-top:-10px; background-color: red; }

herkalees · June 8th, 2006, 12:03 AM

Strangely, adding "height:100%;" to which ever style also has the "display:block;" usually fixes that well known error.

I hate that browser.

uqwebdesign · June 8th, 2006, 03:24 AM

Thanks but sadly that didn't work, if I put height: 100% in, it makes no difference in IE, and makes the button 100% of the table it's in in FF :S anymore suggestions please?

masonbarge · June 8th, 2006, 11:05 AM

The code you've given seems to me to be correct. I plugged it into another site and it worked fine.

I'm guessing the problem lies somewhere else in the code, possibly an inherited feature. What do you have for the ul?

uqwebdesign · June 12th, 2006, 07:36 PM

I've just looked at the CSS again, the UL isn't set as anything - I tried changing it to Height: 0px but it still makes no difference.

Here's the entire CSS sheet if it helps (yes I know it's a complete mess, I'm taking over from someone elses shoddy work)

Code:

.smallnormal            {font-family: Arial,Helvetica; font-size: 11px;}
.smallnormaltable        {font-family: Arial,Helvetica; font-size: 11px; color: #404040; }
.smallnormaltablered    {font-family: Arial,Helvetica; font-size: 11px; color: #404040; }
.smallnormaltablealt    {font-family: Arial,Helvetica; font-size: 11px; color: #404040; }
.mednormal                {font-family: Arial,Helvetica; font-size: 11px }
.mednormal                {font-family: Arial,Helvetica; font-size: 11px; background-color: none; }
.mednormaltable            {font-family: Arial,Helvetica; font-size: 11px; color: #404040; }
.medbold                {font-family: Arial,Helvetica; font-size: 12px; font-weight: bold; color: #404040; line-height: 20px;}
.medboldalt                {font-family: Arial,Helvetica; font-size: 11px; font-weight: bold; color: #404040; }
.medboldtable            {font-family: Arial,Helvetica; font-size: 12px; font-weight: bold; color: #404040; }
.largebold                {font-family: Arial,Helvetica; font-size: 18px; font-weight: bold; color: #404040;  }
.largeboldalt            {font-family: Arial,Helvetica; font-size: 14px; font-weight: bold; color: #404040; }
.smallcompact            {font-family: Arial,Helvetica; font-size: 11px }
.smallbold                {font-family: Arial,Helvetica; font-size: 11px; font-weight: bold }
.smallboldtable            {font-family: Arial,Helvetica; font-size: 11px; font-weight: bold; color: red; }
.smallboldtablered        {font-family: Arial,Helvetica; font-size: 11px; font-weight: bold; color: red; }
.smallboldtablealt        {font-family: Arial,Helvetica; font-size: 11px; font-weight: bold; color: red; }
.smallboldtabletop        {font-family: Arial,Helvetica; font-size: 11px; font-weight: bold; color: red; }
.smallboldtemplate        {font-family: Arial,Helvetica; font-size: 11px; font-weight: bold; color: white; }
.smallboldfooter        {font-family: Arial,Helvetica; font-size: 11px; color: gray; }
.locationbar            {font-family: Arial,Helvetica; font-size: 11px; color: red; }
.searchtexthighlight    {background: #FFEE00; }

A:link                    {text-decoration: none; color: red; }
A:visited                {text-decoration: none; color: red; }
A:hover                    {text-decoration: underline; }

A.minibasket:link        {text-decoration: none; color: red; }
A.minibasket:visited    {text-decoration: none; color: red; }
A.minibasket:hover        {text-decoration: underline; }

A.prodtypemenu:link        {text-decoration: none; color: red; }
A.prodtypemenu:visited    {text-decoration: none; color: red; }
A.prodtypemenu:hover    {text-decoration: underline; }

br { height: 0px; }
ul { height: 0px; }

A.prodtypemenu1:link    {display: block; float:left; margin-top:5px; padding:0px; text-decoration: none; color: #f5f5f5; font-weight:bold; font-size:13px; height: 20px; width:132px; background-image: url(button.jpg);}

A.prodtypemenu1:visited    {display: block; float:left; margin-top:5px; padding:0px; text-decoration: none; color: #f5f5f5; font-weight:bold; font-size:13px; height: 20px; width:132px; background-image: url(button.jpg);}
A.prodtypemenu1:hover    {display: block; float:left; text-decoration: none; margin-top:5px; padding:0px; color: red; font-weight:bold; font-size:13px; height: 18px; width:130px; background-image: url(buttonsel.jpg); border: solid 1px; border-color: red;}

A.prodtypemenu2:link    {display: block; float:left; padding:0px; text-decoration: none; color: red; width:130px; margin-top: -10px; background-color: #f5f5f5; border: solid 1px; border-color: red;}
A.prodtypemenu2:visited    {display: block; float:left; padding:0px; text-decoration: none; color: red; width:130px; margin-top:-10px; background-color: #f5f5f5; border: solid 1px; border-color: red;}
A.prodtypemenu2:hover    {display: block; float:left; padding:0px; text-decoration: none; color: #f5f5f5; width:130px;margin-top:-10px; background-color: red; }

A.table:link            {text-decoration: none; color: #5588bb; }
A.table:visited            {text-decoration: none; color: #5588bb; }
A.table:hover            {text-decoration: underline; color: black; }

A.templatemenu:link        {
                color: white;
                text-decoration: none;
                font-family: Arial,Helvetica;
                font-size: 11px;
                font-weight: bold;
                padding-bottom: 1px;
                padding-left: 4px;
                padding-right: 4px;
                padding-top: 1px;
                }

A.templatemenu:visited        {
                color: white;
                text-decoration: none;
                font-family: Arial,Helvetica;
                font-size: 11px;
                font-weight: bold;
                padding-bottom: 1px;
                padding-left: 4px;
                padding-right: 4px;
                padding-top: 1px;
                }

A.templatemenu:hover        {
                background-color: white;
                color: black;
                text-decoration: none;
                font-family: Arial,Helvetica;
                font-size: 11px;
                font-weight: bold;
                padding-bottom: 1px;
                padding-left: 4px;
                padding-right: 4px;
                padding-top: 1px;
                }

A.locationlink:link        {text-decoration: none; color: red; }
A.locationlink:visited    {text-decoration: none; color: red; }
A.locationlink:hover    {text-decoration: underline; color: red; }

table.minibasket        {background-color: ; }
tr.minibasketline         {background-color: ; }

hr                        {height: 1; color: #DDDDDD }
pre                        {font-family: Courier; font-size: 11px; }
select                    {font-family: Verdana; font-size: 11px; color: black; background-color: white; border-color: #476332; }
form                    {margin: 0 }

table.mainpage                {background-color: #CCCCCC; }
tr.mainpagetableline         {background-color: #EEEEEE; font-family: Verdana; font-size: 11px; color: black; }
tr.mainpagetableline2         {background-color: #FFFFFF; font-family: Verdana; font-size: 11px; color: black; }
tr.mainpagetablespecial        {background-color: #FFEEDD; }
tr.mainpageversionhighlight    {background-color: #FF0000; }
td.shortformatproduct        {border: solid 1px; border-color: #666666; background-color: #ffffff; }
td.background                {border: solid 1px; border-color: #666666; background-color: ; font-family: Verdana; font-size: 11px; font-weight: ; color: black; background-color: #; }
table.basket                {border: solid 1px; border-color: #666666; background-color: #eeeeee; }

.buttonstyle            {font-family: Arial; font-size: 12px; font-weight: bold; color: #f5f5f5; background-color: red; cursor:pointer; }
.textboxsmall            {font-family: Verdana; font-size: 11px; color: black; background-color: white; }

body {
    margin-left: 0px;
    margin-top: 0px;
    background: url('background.gif');
    background-position:center;
    background-repeat:repeat-y;
    
}

Please keep your code inside the [ code ][/ code ] tags. - herkalees

Thanks, this is really starting to irritate now that I can get it ok in EITHER FF or IE, but not both

masonbarge · June 13th, 2006, 08:09 AM

I've never worked with tables to structure a webpage so I don't know how things work. The tables I've done have always behaved.

I will give you an approach, which may or may not be right. If someone hasa definitie solution, just ignore it, LOL.

I do note that <SPAN class=smallnormal> doesn't have quotes around the class name. It might be that you are getting different font reactions from different browsers. I don't see how this would be 100% of your problem, but leaving code like that is just asking for bugs.

Take out all the margins and padding, which will help you analyze the problem. Change the spans to divs and try to add padding and margin to different elements.

uqwebdesign · June 13th, 2006, 12:07 PM

Thanks for your help, I've sorted it now, it was the span instead of using a div, coupled with width problems for the content. As I said I've taken this on from another web designer - shame he's a complete tool when it comes to coding, you wouldn't believe the mess I've got to work with! Thanks again