gap between img and div

[selina]

hello!

I am working on a layout at this page with this code:

Code: Select all

<img src="images/header.png" usemap="#squishyfishy" border="0" width="886" height="149" margin="0" padding="0"/>
                <map name="squishyfishy">
                  <area shape="rect" coords="79,66,266,136" href="http://pulse.comteck.com/" />
                  <area shape="rect" coords="710,78,775,134" href="http://comteck.com/info/v92FAQ.html" />
                </map>
                <div id="nav">
                <ul>
                    <li id="current"><a href="/">Home</a></li>
                    <li><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '90px')" onMouseout="delayhidemenu()">Services    +</a></li>
                    <li><a href="#">Mail Guardian</a></li>
                    <li><a href="#">Free Classifieds</a></li>
                    <li><a href="http://iguessnot.com">News </a></li>
                      <li><a href="#">Search Page</a></li>
                    <li><a href="#">Rates</a></li>
                    <li><a href="#">Set Up Help</a></li>
                    <li><a href="#">FAQs</a></li>
                    <li><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '100px')" onMouseout="delayhidemenu()">About    +</a></li>
                    
                   </ul>
            </div>

The problem here is that there is a little white space about 3px wide between my div tag and img tag.

In my css, I defined the #nav as:

Code: Select all

#nav {
    background: #000 url(/images/menu.jpg) no-repeat center bottom;
    background-color: #000;
    width: 886px;
    height: 29px;
    margin: 0px;
    padding: 0px;
}

I'm very confused and frustrated and I really appreciate any and all help on how to fix this.

Thanks a ton!

[ophiroren]

try putting the img tag inside the div

[selina]

I've can't put it inside the same div because the div is <div class="nav"> which has my navigation bar for a background image. It would just tile the navbar image.

I did try putting the img and div within the same div

Code: Select all

<div>
<img src="images/header.png" usemap="#squishyfishy" border="0" width="886" height="149" margin="0" padding="0"/>
            <div id="nav">
                <ul>
                    <li id="current"><a href="/">Home</a></li>
                    <li><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '90px')" onMouseout="delayhidemenu()">Services    +</a></li>
                    <li><a href="#">Mail Guardian</a></li>
                    <li><a href="#">Free Classifieds</a></li>
                    <li><a href="http://iguessnot.com">News </a></li>
                      <li><a href="#">Search Page</a></li>
                    <li><a href="#">Rates</a></li>
                    <li><a href="#">Set Up Help</a></li>
                    <li><a href="#">FAQs</a></li>
                    <li><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '100px')" onMouseout="delayhidemenu()">About    +</a></li>
                    
                   </ul>
            </div>
</div>

but when I do that, the entire header image disapears... which makes no sense anyway.

grrrr

[ukgeoff]

Somewhere early in your css you should have;

Code: Select all

img {
    padding: 0;
    margin: 0;
}

to make sure the browsers are not adding any default spacing around images.

If that doesn't fix it, put the page somewhere live where we can see it.

Ok, forget that. I've just noticed you have included it inline. Looks like we need to see the page.

[selina]

the test site is comteck.iguessnot.com.

You can see that there is maybe... 5 or 6 pixels of space.

Also, I have added in my header img tag margin="0" padding="0" but you are suggesting that I should make a new css tag with that img info?

I will certainly try that.

The links included in the original code link back to the site that I am beefing up... which is dreadful lol.

I really appreciate this as I am losing my cotton pickin mind!

[selina]

ok i added the

Code: Select all

img {     padding: 0;     margin: 0; }

and unfortunatley it didn't work.

[daygon]

try:

Code: Select all

img{width:100%}

that might work if i looked at your code right.

[Perad]

I just registered to help you... i have this problem all the time. Annoys me everytime and each time i forget the solution. This time i remembered. (yay me)

Just put display:block on all your image styles. If that fails on your divs as well.

[selina]

I just registered to help you... i have this problem all the time. Annoys me everytime and each time i forget the solution. This time i remembered. (yay me)

Just put display:block on all your image styles. If that fails on your divs as well.

!!!!Perad!!!!: mrgreen:

Thank you thank you thank you!

I appreciate it so much! I don't even know what that display:block means yet, but it worked perfectly.

I thank you so much!!

[Perad]

Originally Posted by selina

!!!!Perad!!!!: mrgreen:

Thank you thank you thank you!

I appreciate it so much! I don't even know what that display:block means yet, but it worked perfectly.

I thank you so much!!

I'm glad i could help... as for display block i don't know what it means either. If anyone can explain it the please feel free.

[ukgeoff]

The css atribute-value pair display: block, is the default for some elements such as <div> and <p> and it means two things. One that the element is actually visible and the second that it will take up as much width as possible.

Elements of this type naturally stack up on top of each other as apposed to side by side.

Two of the other values most commonly used are; none and inline.

As block is the default style for certain elements, explicitely specifying it should not have been the solution. I will look at your page and post further.

[daygon]

Once again geoff is here to explain everything to us. Thank You

[moojoo]

Block Level Elements as stated are like this:

[ element ]
[ element ]

Inline elements i.e. span, etc... are like this:

[ element ] [ element ]

The Attributes are:

display:inline;
display:block;

For example if you wanted an unordered list to be horizontal you would use display:inline; or if you displayed each li as a block you would float: the li etc.. Hope that clears it up a bit.

[selina]

now that I understand what that element means, i wonder why it solved my problem?

I must have coded something wrong to begin with.

If anyone wants, please feel free to check out my css to see if I dropped the ball on something.

css

I am so happy I found this forum.

[moojoo]

One thing I did notice was this:

Code: Select all

/* For IE... */
* html .sd_right {
    clear:both;
    background-color: #FFF;
    float: right;
    color: #000;
    margin: 0 40px 0 0;
    padding: 0px 0px 0 15px;
    width: 170px;
    border-left: 1px dashed #ccc;

Save yourself some trouble and headache later and make a IE specific style sheet and place it with a conditional comment in the head of your documents..

<!--[if lte IE 6]>
Special instructions for IE 6 here
<![endif]-->

LTE = lesser than or equal too
LT = Lesser than
etc...

And then of course for IE 7 etc..

<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->

[daygon]

I dont know why but IE is getting more and more problems with viewing web page properties. I think IE should be completely takes off and Firefox should come installed on every windows computer. But thats just my opinion. Too many spacifics with IE and its the only browser anyone has troubles with. Garbage.

[moojoo]

It unfortunately is a core component of the operating system. i.e. windows explorer or something.

[selina]

yeah i use firefox and apparently microsoft's newest explorer is a cheap imitation of firefox.

i don't even want to include IE fixes, but tons-o-ppl use it, so I have to. grrr