Member Avatar for drfarzad

at the top our website we have a purple header
it working fine in IE but in firefox we have 1cm space between header and menu .
you check this issue on attachment file .
Thanks if you help me to solve this issue

head.gif 2.72 KB
Edited by drfarzad because: n/a
  • 5 Contributors
  • 7 Replies
  • 97 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by floatingDivs

Dani AI

Generated

A concise, practical checklist that builds on the tips already posted by , and while avoiding redoing their exact suggestions.

First, use the browser inspector (select the header and the menu and look at the computed box model) to see which element is contributing the gap. Common, cross-browser causes to check quickly are: default margins on block elements (paragraphs/headings), collapsing margins between parent and first child, inline-image baseline space, and differences from running in quirks mode versus standards mode.

Try these quick, non-destructive tests to isolate the problem:

/* quick test rules */
body, h1, p { margin: 0; }
img { display: block; }
td  { vertical-align: top; }

If applying those removes the gap, narrow down which rule is necessary and make it specific to the header/menu elements rather than global resets. If the gap persists, build a minimal test page with only the header and the menu — that often makes the offending node obvious.

Further reading: how collapsing margins work, using the Firefox Page Inspector, and why document mode (doctype/quirks) matters are explained on MDN:

Recommended Answers

All 7 Replies

Member Avatar for Lusiphur

Ya, um... after digging through the page source at the URL you provided I'm going to guess it's something easily solved by setting padding to 0 on either the DIV or the table within the DIV for your top 2 DIVs on your website.

But then again I could be wrong because I got tired of reading through the page source about 1/2 way into the 2nd DIV.

Perhaps if you were to post the CSS and HTML details of the page in question here in the forum someone else who might otherwise not have looked into it (as some folks just don't feel like going to an outside site and manually opening your page source to find the issue for you) would be able to find more of the issues for you.

Member Avatar for Member #334542

Even you have that space in IE too. I have checked in IE6.0. May be it will comes within the red image or below image. Also check with the table paddings.

Member Avatar for drfarzad

Even you have that space in IE too. I have checked in IE6.0. May be it will comes within the red image or below image. Also check with the table paddings.

padding is 0 . any body can help ?

Member Avatar for Member #739054 
<div align="center">
          <table width="493" border="0" align="right" cellpadding="0" cellspacing="0">

            <tr>
              <td width="0" height="0"><div align="right" class="style73"><a href="http://www.ariahost.net" class="unnamed1">عضویت و ثبت سفارش در پرتال</a></div></td>
              <td width="0" height="0"><div class="style73" id="telephone_number">
                <p align="right">SMS Services : 3000787800</p>
              </div></td>
              <td width="0" height="0"><div align="right" class="style73">
                <div align="right">تماس با ما : </div>

              </div></td>
              <td width="0" height="0"><div align="left" class="style73"> +98 (21) 77 26 94 10</div></td>
              <td width="13">&nbsp;</td>
            </tr>
          </table>
      </div>

In this code I would remove the div (beginning and ending tag) around the table that is causing the space problem. Then in the table I would just add an attribute called align="center" or put a style of margin-left: auto; margin-right: auto;.

possible fix:

<table width="493" border="0" align="right" cellpadding="0" cellspacing="0" style="margin-left: auto; margin-right: auto;">

            <tr>
              <td width="0" height="0"><div align="right" class="style73"><a href="http://www.ariahost.net" class="unnamed1">عضویت و ثبت سفارش در پرتال</a></div></td>
              <td width="0" height="0"><div class="style73" id="telephone_number">
                <p align="right">SMS Services : 3000787800</p>
              </div></td>
              <td width="0" height="0"><div align="right" class="style73">
                <div align="right">تماس با ما : </div>

              </div></td>
              <td width="0" height="0"><div align="left" class="style73"> +98 (21) 77 26 94 10</div></td>
              <td width="13">&nbsp;</td>
            </tr>
          </table>
Member Avatar for Lusiphur

Just a note, not trying to be 'picky' here but...

Most professional web developers/designers these days are trying to move away from tables and toward divs (I've even seen positions advertised where they specifically ask for people who can code table-less webpages).

With that in mind, would it not make more sense to try to encourage newer developers/designers towards a div driven site as opposed to stepping backwards and eliminating a div in favour of a table?

That being said, whatever works best I guess :twisted:

Member Avatar for Member #739054

Yes I agree with Lusiphur that you should use a table-less development, but using all div tags is rather tricky for new developers. Plus the site looks to be written using mostly tables. So work with something familar at this point. But yes, drfarzad should use a tableless layout for optimal performance.

Member Avatar for floatingDivs

Add a background-repeat:no-repeat in the <td> that holds the background-image. I tested it and it worked well.

<td height="32" background="images/up.png" width="0" style="background-repeat:no-repeat">
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.