9 replies [Last post]
York
York's picture
Offline
Regular
Los Angeles
Last seen: 12 years 40 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

The text to the right of the images on my page looks the way I want in Firefox, but not in IE6 (it should be flush with the top and bottom of the image, as seen in Firefox.)

CSS Solution? Thanks!

My HTML

Untitled Document

  • Look Look A portrait series of concertgoers in L.A.
  • Learn Learn A portrait series of concertgoers in L.A.
  • Play Play A portrait series of concertgoers in L.A.

My CSS

/* global styling
----------------------------------------------- */
html {
margin: 0;
padding: 0;
text-align: center;
background-attachment: fixed;
background-color: #353535;
background-image: url(../images/backgroundGradient.jpg);
background-repeat: repeat-x;
color: #CCC;
}
body {
width: 728px;
margin: 0px auto;
font: 10px Arial, Helvetica, sans-serif;
line-height: 1.5em;
text-align: left;
}

/* banner
----------------------------------------------- */
div.banner {
position: absolute;
width: inherit;
top: 91px;
}
img.banner {
float: left;
}
img.feedBar {
left: 0;
width: 728px;
height: 24px;
}
img.feed {
position: absolute;
right: 4px;
bottom: 8px;
border: 0;
width: 16px;
height: 16px;
}

/* links
----------------------------------------------- */
a:link {
color: #CCC;
background-color: inherit;
text-decoration: none;
}
a:hover {
color: #FFF;
background-color: inherit;
text-decoration: none;
}
a:visited {
color: #CCC;
background-color: inherit;
text-decoration: none;
}

/* nav
----------------------------------------------- */
#p7menubar {
height: 91px;
width: 728px;
position: absolute;
z-index: 10;
font-size: 9px;
}
#p7menubar li {
width: 91px;
height: 91px;
text-indent: -9999px;
background-repeat: no-repeat;
}
#p7menubar li li { height: auto;
}
body#indexPage li#index {
background-image: url(../images/nav/navIndexGray.jpg);
}
body#knowPage li#know {
background-image: url(../images/nav/navKnowColor.jpg);
}
body#learnPage li#learn {
background-image: url(../images/nav/navLearnColor.jpg);
}
body#lookPage li#look {
background-image: url(../images/nav/navLookColor.jpg);
}
body#playPage li#play {
background-image: url(../images/nav/navPlayColor.jpg);
}
body#readPage li#read {
background-image: url(../images/nav/navReadColor.jpg);
}
body#sharePage li#share {
background-image: url(../images/nav/navShareColor.jpg);
}
body#shopPage li#shop {
background-image: url(../images/nav/navShopColor.jpg);
}
#index {
background-image: url(../images/nav/navIndexGray.jpg);
}
#know {
background-image: url(../images/nav/navKnowGray.jpg);
}
#learn {
background-image: url(../images/nav/navLearnGray.jpg);
}
#look {
background-image: url(../images/nav/navLookGray.jpg);
}
#play {
background-image: url(../images/nav/navPlayGray.jpg);
}
#read {
background-image: url(../images/nav/navReadGray.jpg);
}
#share {
background-image: url(../images/nav/navShareGray.jpg);
}
#shop {
background-image: url(../images/nav/navShopGray.jpg);
}
#index:hover a, #index:focus a, #index:active a, #index.p7hvr a {
background-image: url(../images/nav/navIndexColor.jpg);
}
#know:hover a, #know:focus a, #know:active a, #know.p7hvr a {
background-image: url(../images/nav/navKnowColor.jpg);
}
#learn:hover a, #learn:focus a, #learn:active a, #learn.p7hvr a {
background-image: url(../images/nav/navLearnColor.jpg);
}
#look:hover a, #look:focus a, #look:active a, #look.p7hvr a {
background-image: url(../images/nav/navLookColor.jpg);
}
#play:hover a, #play:focus a, #play:active a, #play.p7hvr a {
background-image: url(../images/nav/navPlayColor.jpg);
}
#read:hover a, #read:focus a, #read:active a, #read.p7hvr a {
background-image: url(../images/nav/navReadColor.jpg);
}
#share:hover a, #share:focus a, #share:active a, #share.p7hvr a {
background-image: url(../images/nav/navShareColor.jpg);
}
#shop:hover a, #shop:focus a, #shop:active a, #shop.p7hvr a {
background-image: url(../images/nav/navShopColor.jpg);
}
#p7menubar li:hover ul a, #p7menubar li:focus ul a, #p7menubar li:active ul a, #p7menubar li.p7hvr ul a {
background-image: url(../images/nav/navMenuGray.jpg);
}
#know ul li a:hover {
background-image: url(../images/nav/navMenuKnow.jpg);
}
#learn ul li a:hover {
background-image: url(../images/nav/navMenuLearn.jpg);
}
#look ul li a:hover {
background-image: url(../images/nav/navMenuLook.jpg);
}
#play ul li a:hover {
background-image: url(../images/nav/navMenuPlay.jpg);
}
#read ul li a:hover {
background-image: url(../images/nav/navMenuRead.jpg);
}
#share ul li a:hover {
background-image: url(../images/nav/navMenuShare.jpg);
}
#shop ul li a:hover {
background-image: url(../images/nav/navMenuShop.jpg);
}

/* PVII Menu CSS Express Drop-Down Menu by Project Seven Development (www.projectseven.com)
----------------------------------------------- */
/*Clears the floated menu items.
Assigned to a BR tag placed just before
menuwrapper's closing DIV tag*/
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
/*
p7menubar is the root UL and p7menubar ul applies to all the sub-menu ULs.
We set padding and margin to zero to eliminate all indentation, turn bullets off,
and set a font-family different from the global font-family declared for the
body element above. This sets font for just the menu. Do not add a font-size here.
*/
#p7menubar, #p7menubar ul {
padding: 0;
margin: 0;
list-style: none;
}
/*
Root-Level Links. Do not change the first two properties.
Adjust padding values to make the root links taller and to offset them
from the left and right edges of the link box. The border right creates a
separator between links. Font-size is set here and will apply to all menu levels.
Font color is set to light gray.
*/
#p7menubar a {
display: block;
width: 91px;
height: 91px;
}
/*
The Root-Level list items. Floating left allows
them to appear horizontally. Width is for IE5 Mac. The last rule in
this style sheet will set the width for this element to auto for all
other browsers - hiding it from IE5 Mac. The width is proportional.
As you add and edit root menu items, you will need to test this width
to ensure it is wide enough to accomodate all text.
*/
#p7menubar li {
float: left;
}
/*
Sets width for Sub-Menu box and the List Items inside - in proportional em units.
This allows the sub-menu width to expand if users resize the text in their browsers.
*/
#p7menubar li ul, #p7menubar ul li {
width: 91px;
}
/*
The sub-menu links. We set color and turn off the right border, which
would otherwise be inherited from the root link rule. We set top and
bottom padding less than the root items and increas the left padding
to indent the sub-menu links a small amount in from the root links.
*/
#p7menubar ul li a {
line-height: 2em;
height: 2em;
text-align: right;
padding-right: 9px;
width: 82px;
text-decoration: none;
}
/*
Sub-Menu Unordered Lists describes each dropdown sub-menu grouping.
Positioned Absolutely to allow them to appear below their root trigger.
Set to display none to hide them until trigger is moused over.
Background Color must be set or problems will be encountered in MSIE.
Right and bottom borders are set to simulate a raised look.
A gradient background image is assigned.
*/
#p7menubar li ul {
position: relative;
display: none;
color: inherit;
background-color: #FFFFFF;
}
/*
Set the Sub-Menu UL to be visible when its associated
Root-Level link is moused over. The second selector is
assigned to IE5 and IE6 via the P7_ExpMenu script.
*/
#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
display: block;
}
#p7menubar li {
width: auto;
}

/* sidebar1
----------------------------------------------- */
#sidebar1 {
width: 160px;
}
#sidebar1 img {
border: 1px solid #999;
float: left;
margin: 2px 10px 0 0;
}
#sidebar1 ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#sidebar1 li {
margin-bottom: 10px;
}
.headerText {
color: #FFF;
background-color: inherit;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
display: block;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote: CSS Solution?

Quote:

CSS Solution? Thanks!

Taking the forum for granted somewhat? what have you tried by way of solving the problem so that we don't suggest already covered ground?

Have you atttempted to control your margins i.e ensuring that they are set to zero? is IE incorrectly not collapsing the margin while FF is?

As regards the forum please bear in mind that it isn't simply a fix up service Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

York
York's picture
Offline
Regular
Los Angeles
Last seen: 12 years 40 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

Hi, Hugo. As an artist

Hi, Hugo. As an artist teaching myself CSS in order to redesign my online portfolio to be standards compliant, I don't take the valuable resource of CSScreator and its capable moderators for granted.

I make every attempt to solve my CSS problems on my own, but it's a difficult language to speak for an amateur like me, so I will have many questions to ask. I don't consider this site a 'fix up' service, but rather an educational one, where I can find guidance from experts like you when necessary.

I have zeroed out the margins in the HTML tag, but perhaps I have to zero them with greater specificity? Again, being a near-beginner at this, I have a lot to learn, and so I ask people who can teach me.

Understand that I use this forum to advance my skills, and if you are capable and willing to help me in that, I look forward to hearing what you and your fellow moderators have to suggest.

If you could suggest other resources or forums where I can search for answers, I'd also enjoy hearing about those. Thanks.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It's because you've set the

It's because you've set the spans to display: block. You could try floating them left and then setting a width on them so that it forces the rest of the content to a new line.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Glad to hear that you don't

Glad to hear that you don't take the forum for granted york, and yes we are happy to help with problems, But read again your opening post as it reads in a very perfunctory manner. Smile

"Something should be doing something, it's not. solution?"
It's not the best approach to phrasing a problem.

Don't take umbrage by my remarks it's just that it's important that people don't take for granted the resources a forum has to offer, as much as it is easy for all of us to do from time to time.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

York
York's picture
Offline
Regular
Los Angeles
Last seen: 12 years 40 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

The change you suggested

The change you suggested worked, Tyssen. Thank you.

Now I'd like each <li> element to be completely clickable. Currently, the image and the text are, but there are areas - like the space between the image and text - that are not.

I tried adding this CSS rule, thinking that by defining the size of the box, I'd make it entirely clickable.

#sidebar1 li {
width: 160px;
height: 40px;
}

That did not work. Ideas? Thanks.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You have defined the size of

You have defined the size of the li element but it's children are inline
elements and as such have no height or width and the hover is restricted to their actual line boxes, foreground images are also inline but their dimensions are implicit in the image. To make the anchor seem to beclickable over a region greater than it's natural one you have to change it's display context to block so that it then matches the li element dimensions you'll also need to add height:100% for IE

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

York
York's picture
Offline
Regular
Los Angeles
Last seen: 12 years 40 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

The change you suggested

The change you suggested functions as desired in FF, but the header text ('Look', 'Learn', and 'Play') is no longer clickable in IE6.

Here's the CSS rule I added:

#sidebar1 a {
display: block;
height: 100%;
}

Perhaps I added the 100% height to the wrong rule, or? IE hacks are not my strength, so if you have any advice, I'd appreciate it. Thanks.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Your maerkups badly wrong

Your maerkups badly wrong and mal-formed, you may not nest block level elements within inline ones regardless of the display context.

You must remove the heading tags from the anchor text, headings are not used in this way.

You may set one heading for that list but it must either be outside the ul element or in the first li item, or you could change the headings tags to <span> and change the display of the span to 'block' and font-size it etc.

What you have their would possibly be better described using a dl list for the dt element you can increase the font-size and embolden the text the image could go in the first dd floated left and the descriptive text in the second.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

York
York's picture
Offline
Regular
Los Angeles
Last seen: 12 years 40 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

Thanks, Hugo. This issue is

Thanks, Hugo. This issue is now solved.