Help With Display: Block Vertical Spacing Please

uqwebdesign · #1 Jun 7th, 2006, 23:58

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 · #2 Jun 8th, 2006, 04:03

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

I hate that browser.

uqwebdesign · #3 Jun 8th, 2006, 07:24

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 · #4 Jun 8th, 2006, 15:05

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 · #5 Jun 12th, 2006, 23:36

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: Select all

.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 · #6 Jun 13th, 2006, 12:09

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 · #7 Jun 13th, 2006, 16:07

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Overriding display:inline-block	gazzou	Web Page Design	0	Aug 27th, 2007 12:03
Display:Block in IE	sparadox	Web Page Design	4	Jul 25th, 2007 19:30
div spacing	johnnybravo	Web Page Design	13	Sep 6th, 2006 12:06
display:block	benbacardi	Web Page Design	20	Jul 30th, 2004 16:08
display:block	benbacardi	Web Page Design	4	Apr 21st, 2004 19:40

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Help With Display: Block Vertical Spacing Please