CSS - H1 Image Replacement Margins (ie7)

So I'm a student working on my first real project. I've done Suckerfish drop-downs before, but I'm having trouble doing them with graphic text instead of system text. The image replacement works fine on the first level, but the nested li's just repeat the image of the main li.

For example, the main nav item with the drop-down is "Our Coffee". In the drop-down menu instead of having the different images for the corresponding links, "Our Coffee" is repeated.

Here's a selection of my code where I think the problem is happening:

Code:

<div id="nav">
   	<ul id="dd">
       	<li id="hm"><a href="menu.html">Menu</a></li>
        <li id="au"><a href="about_us.html">About Us</a></li>
        <li id="oc"><a href="#">Our Coffee</a>
        	<ul>
            	<li id="oc_dd_ko"><a href="oc_kona.html">Kona</a></li>
            	<li id="oc_dd_ma"><a href="oc_maui.html">Maui</a></li>
            	<li id="oc_dd_ka"><a href="oc_kauai.html">Kauai</a></li>
            </ul>
        </li>
        <li id="os"><a href="os_hy.html">Our Stores</a></li>
        <li id="ols"><a href="online_store.html">Online Store</a></li>
        <li id="oct"><a href="our_culture.html">Our Culture</a></li>
    </ul>
</div>  

Code:

#nav ul li ul li a {
	display: block;
	height: 0px;
	overflow: hidden;
}

#dd li#oc a {
	display: block;
	width: 95px;
}

#dd li#oc {
	float: left;
	width: 95px;
}

#dd li#oc ul {
	position: absolute;
	width: 95px;
	left: -9999px;
}

#dd li#oc:hover ul {
	left: auto;
}


#dd li#oc:hover ul, #dd li.sfhover ul {
	left: auto;
}

li#oc ul li a {
	height: 0px;
	display: block;
	overflow: hidden;
}

#oc_dd_ko a {
	background: url(../images/oc_ddnav-01_lo.gif) no-repeat;
	padding-top: 13px;
	width: 58px;
}

#oc_dd_ko a:hover {
	background: url(../images/oc_ddnav-01_hi.gif) no-repeat;
	padding-top: 13px;
	width: 58px;
}

#oc_dd_ma a {
	background: url(../images/oc_ddnav-02_lo.gif) no-repeat;
	padding-top: 15px;
	width: 58px;
}

#oc_dd_ma a:hover {
	background: url(../images/oc_ddnav-02_hi.gif) no-repeat;
	padding-top: 15px;
	width: 58px;
}

#oc_dd_ka a {
	background: url(../images/oc_ddnav-03_lo.gif) no-repeat;
	padding-top: 16px;
	width: 58px;
}

#oc_dd_ka a:hover {
	background: url(../images/oc_ddnav-03_hi.gif) no-repeat;
	padding-top: 16px;
	width: 58px;
}

#dd, #dd ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

Any suggestions would be appreciated.

I figured out how to put the text on top of my background Div tag image from a previous post, but this has now shown me another problem. I now need the text to be on top of the white shape only, and not spill onto the gray area. If I remember correctly (I don't have the .ai file any more) the white area is about 500px in width. But whenever I adjust the margins to reflect this, the right side just will not comply. I'll post the two div classes' code below and maybe someone can lend me a hand.

Code:

#mainContent {
background-color:transparent;
background-image:url((URL address blocked: See forum rules));
background-repeat:no-repeat;
background-attachment:scroll;
background-position:0% 0%;
height:610px;
margin: 10px;
margin-right: 1cm;
overflow:auto;
padding-top: 1cm;
padding-left: .6cm;
width:550px;
}

#mainContentWrapper {

float:left;
margin-right:11px;
min-height:100%;
width:550px;
}

Hi, I'm a total dork, and only barely able to finagle occasional css pieces to work right.

I need to center a background image, though need to keep minimum margin [if user resizes browser window] -- not sure how to do that?

I have a background-colored table cell that appears beneath this on the page, so if a user resizes their browser window too small, the background image floats off the left edge. THANK YOU!!

Hi!

Could some experienced CSS developer please confirm this:

All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px).

However, bottom & top margins never combine.

Is all this true?

I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>.

Code:

html, body {
	margin:0px;
	padding:0px;
	background-image:url(images/interface/background.png);
}


#body_image {
	width:935;
	margin:0 auto;
	padding:0px;
	background-image:url(images/interface/body.png);
	background-repeat:no-repeat;
	background-position:center;
}

#container {
	width:904px;
	height:750px;
	margin:15px;
}



#slug {
	height:15px;
}

Code:

<div id="body_image">

<div id="container">
	<div id="header">Header</div>
	<div id="nav">Nav</div>
	<div id="sidebar">Sidebar</div>
	<div id="content">Content</div>
	<div id="footer">Footer</div>
	


</div>
</div>

The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background.

ok, so it's not exactly image swapping, but i'm trying to get this thing to work in Firefox (works in IE). My xhtml is as follows: Code:

<div class="foot">
	<img src="images/menubase.jpg" alt="see | hear | speak" />
		<a href="#" id="menu_see"> </a>
		<a href="#" id="menu_speak"> </a>
		<a href="#" id="menu_hear"> </a>

And the CSS: Code:

a#menu_see {
	position: absolute;
	left: 50%;
	top: 0px;
	width: 66px;
	height: 44px;
	margin-left: -105px;
	background: url(../images/holderMenuSee.gif) no-repeat fixed right top;
}
a#menu_see:hover {
	background: url(../images/menuSee.jpg) no-repeat fixed right top;
}
a#menu_speak {
	position: absolute;
	left: 50%;
	top: 0px;
	width: 74px;
	height: 44px;
	margin-left: -37px;
	background: url(../images/holderMenuSpeak.gif) no-repeat fixed right top;
}
a#menu_speak:hover {
	background: url(../images/menuSpeak.jpg) no-repeat fixed right top;
}
a#menu_hear {
	position: absolute;
	left: 50%;
	top:0px;
	width:61px;
	height: 44px;
	margin-left: 40px;
	background: url(../images/holderMenuHear.gif) no-repeat fixed right top;
}
a#menu_hear:hover {
	background: url(../images/menuHear.jpg) no-repeat fixed right top;
}

the page is located [ here ]

Hi All,

This seems to be a bit of a recurring problem for me in a lot of the new CSS designs I'm trying... but it seems that IE interprets both padding and margins differently than how firefox interprets them. Sometimes it seems to do it the same, and other times differently.

Take a look at this:
http://zeroonedesign.com/beta/newsite/index.html

CSS he
http://zeroonedesign.com/beta/newsite/style.css

Now look at it first in Firefox (the desired effect) and then in IE. IE seems to be incapable of understanding this particular piece of the code

Code:

#menu {padding-top:140px;text-align:left;padding-left:38px;}
#menu ul{margin:0px;}

#menu ul li{display:inline;margin-right:10px;padding:5px 7px 5px 7px;color:#fff;}

#menu ul li a{color:#fff;font-size:10pt;text-decoration:none;}

#menu ul li a:hover{color:#fff;font-size:10pt;border-bottom:3px solid #fff;}

#menu ul li a.selected{color:#f88000;font-size:10pt;border-bottom:2px solid #f88000;}

Ideas? Help? I know the box model is different for IE than it is for FF but I've tried the box model hack and it doesn't seem to do anything.

Hello. I have a site I would in the past have used an I-frame for content so it could be added and automatically place a scrollbar if needed. I also used them when a client needed me to set up user editable content [php would be set to populate the html page showing in the frame]

I'm sure there's a better way to do this now, but I haven't figured it out being so new to css.

one application I'd like to use this in is this site: http://greentypeoftube.com/div/home1.html

in the 'content' area.

last I checked there's no cross platform/browser way to control the color and style of scrollbars. it's been a few months since I checked though.

if anyone has info on that as well, I'd love to hear about it.

thankyou, you will be my hero although I am unable to sing like the girl who sang the hero song in the movie.

s

I found some neat css code to display an image file to the user, but text to the search engines (which count more for internal linking when it comes to seo).



The sample code I found uses an h3 tag and is as follows:
Code:

<h3 id="header">
	<span>Revised Image Replacement</span>
</h3>

/* css */
#header {
	width: 329px;
	height: 25px;
	background-image: url(sample-opaque.gif);
	}
#header span {
	display: none;
	}

(full explanation found at: http://www.mezzoblue.com/tests/revised-image-replacement/)





I tried to do so on my site using anchor text, but can't get it to work. Nothing shows up at all
Code:

<a href="Apply_Now_Surety_Bond.htm" id="blank_button"><span>Apply</span></a>



/* css */

#blank_button a{
	width: 93px;
	height: 52px;
	background-image: url(apply.jpg);
	}
#blank_button span {
	display: none;
	}

You can see that the "Apply" button does not appear at: www*bryantsuretybonds*com/new (it should be the first one on the left)

according to the css 2.1 spec if you specify the margin/padding of an element in ems then it takes the measurement from that element's font size, this means that

*
{
font size: 1em;
}

h1
{
font-size: 1.5em;
margin-bottom: 1em;
}

gives h1 a margin of ... 1.5em ... which sucks. and is counter intuitive IMO. how is one supposed to go about having fixed margin spaces when using scalable fonts? now i know that margins overlap so theoretically setting

p
{
margin-top: 1em;
}

instead would work, but only where a p lies under a h1. if i had a h1 then a h2 then a p then how large would the gap be between the h1 and the h2? and how would i control that reliably?

the only way around this i can think of is this

*
{
font-size: 1em; /*let's say this equates to 10px on the device it's being viewed on*/
}

h1
{
font-size: 1.5em; /*...then this would be 15px*/
margin-bottom 0.67em; /*..this would be 67% of 15px = 10px!*/
}

h2
{
font-size: 1.2em; /*12px*/
margin-bottom: 0.83em; /*83% of 12px = ... 10px!*/
}

p
{
margin-botton: 1em;
}

Now, when i scale the font size all the margins should scale in accordance with the <p>. at least, according to my understanding of the spec. i'll try it in the next couple of hours (first thing monday morning just got to work)... anyone else thought of a scalable friendly alternative?

ok im having a no brainer and i cant figure out what i did wrong, can someone take a look at this and tell me how to remove the space below. im posting a link, it has the css text posted on the page with the menu im working on that im having difficulty with.

thanks in advance,

Trizen

www dot cooperativecreditsystems slash Untitled-2 dot html

apparently being a new user i cant post links but just add the dots as dots and you should be able to find it.

I am having a heck of a time with this side sub-menu. I cannot seem to get the left margins to be equal in IE 6, 7 or 8?

My html:


Code:

<!-- show_menu2 -->
 <ul id="sub_menu" class="menu" style="margin-left:-5px;position: relative; background-color:#CFF">

    <li><a href="#" class="menu-expand menu-first navlev2" title="Project">Add-ons Project</a></li>
    <li><a href="#" class="menu-expand menu-parent navlev2" title="What Modules">Modules</a>
     <ul class="ullev3">
        <li><a href="#" class="menu-sibling menu-first navlev3" title="Modules Here">Module</a></li>
        <li><a href="#" class="menu-sibling navlev3" title="Admin Tools">Admin Tools</a></li>

        <li><a href="#" class="menu-current navlev3" title="Random">Code Snippets</a></li>
        <li><a href="#" class="menu-sibling menu-last navlev3" title="Droplet of Link">Droplets</a></li>
     </ul>
    </li>
    <li><a href="#" class=" navlev2" title="AMASP">AMASP</a>    </li>
    <li><a href="#" class=" navlev2" title="Templates">Templates</a> </li>

    <li><a href="#" class="menu-last navlev2" title="Backend Pages">Backend Themes</a></li>
 </ul>

  
          </div>
                          <!-- end of subnavigation --> 

My CSS:
Code:

#submenu
{
	padding: 0;
	/* [disabled]width: 247px; */
	/* [disabled]position: relative;
*/
	/* [disabled]left: -15px; */
}
#submenu a
{
	text-decoration :none;
	color :#5b9acf;
	padding-left :12px;
	display :block;
	background-image: url(../images/bullets_micro/square3.gif);
	background-repeat: no-repeat;
	background-position: 2px 50%;
}
#submenu a:hover
{
	color :#003366;
	background-image: url(../images/bullets_micro/square1.gif);
	background-repeat: no-repeat;
	/* [disabled]background-position: 4px 50%;
*/
}
#submenu a:active
{
	border: none;
}
#submenu a.menu-current
{
	font-weight :bold;
	color :#003366;
	background-image: url(../images/bullets_micro/asst3.gif);
	background-repeat: no-repeat;
	background-position: 4px 50%;
}
#submenu ul
{
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0px;
	/* [disabled]margin-left: -25px;
*/
	/* [disabled]position: relative;
*/
	/* [disabled]left: -10px;
*/
}
#submenu ul li
{
	padding :5px 0;
	/* [disabled]line-height :1.4em; */
	font-size :12px;
	list-style-type :none;
	border-bottom :#cccccc 1px solid;
}
#submenu ul li.a
{
	padding: 0px 10px;
}
#submenu ul li li
{
	border-bottom :none;
	padding-bottom :0px;
	font-size :11px;
}
#submenu ul li li a:link,
#submenu ul li li a:visited
{
	color :#003366;
	background-image: url(../images/bullets_micro/diamond4.gif);
	background-repeat: no-repeat;
	background-position: 2px 50%;
}
#submenu ul li li a:hover
{
	background-image: url(../images/bullets_micro/diamond.gif);
	background-repeat: no-repeat;
	/* [disabled]background-position: 4px 50%;
*/
	color: #6DB9FA;
}
/* ====================== */

My test page: (pardon the blue background I just added this to see the container.)
http://new.ssmarts.org/page.html


Thanks so much.

I thought I had this worked out before with the help of this forum, but it seems to be back again!

In IE 6 (and maybe others, who knows. I am running Ubuntu =/ ) there is a big gap between the top horizontal nav and the comic.

http://www.jjsunshines.com/

Any help would be greatly appreciated! I'll even trade you php help!

Hello, I have been having some problems with ie and auto margins, In firefox my page shows perfectly, but in ie, the page hangs to the left only showing the default margin that ie gives you. I want the page to center in the middle. The link to the page is spanglerdesign.com/test/Mulligan1