CODEWITHSUNDEEP
csshtmlpadding
John Daly
John Daly

Reputation: 13

Padding missing from div

I've created a mobile friendly site but I'm having a minor problem when the page is displayed at low resolutions, such as on a mobile.

http://designated.net.au/testbed/djdais/

As you can see it looks fine in full screen, but at low resolution it looks like this:

enter image description here

There is 5px of padding missing from the bottom of the menu, even though I have defined it in the CSS.

Here is my code:

/* =Menu
-------------------------------------------------------------- */

#access {
background: #333; /* Show a solid color for older browsers */
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
min-width: 300px;
max-width: 880px;
min-height: 50px;
border: solid;
border-width: 10px;
border-color: #666;
padding: 0;
text-transform: uppercase;
}
#access ul {
font-size: 14px;
line-height: 30px;
list-style: none;
margin: 0;
padding: 5px;
}
#access li {
float: left;
position: relative;
margin: 5px 5px 5px 5px;
width: 135px;
height: 30px;
text-align: center;
background: #666;
}

Upvotes: 0

Views: 631

Answers (3)

Archna Rangrej
Archna Rangrej

Reputation: 664

#access {
background: #333; /* Show a solid color for older browsers */
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
min-width: 300px;
max-width: 880px;
min-height: 50px;
border: solid;
border-width: 10px;
border-color: #666;
padding: 5px;
text-transform: uppercase;
}

#access ul {
font-size: 14px;
line-height: 30px;
list-style: none;
margin: 0;
}

Try this. Remove padding from #access ul & apply padding to #access.

Upvotes: 0

Novica89
Novica89

Reputation: 212

Try removing the padding from the access ul {} and apply it to the access div instead

Upvotes: 0

JV10
JV10

Reputation: 891

Put a float on your #access ul

Try this:

#access ul {
font-size: 14px;
line-height: 30px;
list-style: none;
margin: 0;
padding: 5px;
float: left;
}

Upvotes: 1

Related Questions