9 replies to this topic

[iVista]

hi there!

Can anyone help me with this small annoying issue I am facing with CSS? I can't seem to figure out how to deal with it or the best way to go about solving it!

Any help would be appreciated! :)

See this link here: CLICK HERE
The header image and the body has a gap in between. I can't seem to know where that gap came from!

I can give you admin access to the WP dashboard theme editor if you think you can help me solve this silly issue! :)

Cheers!

[gokuajmes]

Your HTML document seems to be Invalid . Please do a XHTML transitional check with Visual Studio .There are many errors,
like Nested UL tags,
But i could not still find how those spaces came in .You have given 3 break line tags above the image but nothing below.
I suppose it has something to do with the Div tag below the Image.
Or
Style of the Div that holds the whole Page

[iVista]

gokuajmes said:

Your HTML document seems to be Invalid . Please do a XHTML transitional check with Visual Studio .There are many errors,
like Nested UL tags,
But i could not still find how those spaces came in .You have given 3 break line tags above the image but nothing below.
I suppose it has something to do with the Div tag below the Image.
Or
Style of the Div that holds the whole Page

Hi, Thanks for checking it out. Yes I am aware of that and tried whatever I could to remove it. Would you be able to help me on this small issue? I will PM you the admin details.

[Howdy_McGee]

I love Chrome because of it's Inspect Element tool which is a great help in web design. Google Chrome > Right Click > Inspect Element

It looks like your <center> tag is adding padding by default, try removing it and using CSS "text-align: center;" or "margin-left: auto; margin-right: auto; width: 800px"

[iVista]

Howdy_McGee said:

I love Chrome because of it's Inspect Element tool which is a great help in web design. Google Chrome > Right Click > Inspect Element

It looks like your <center> tag is adding padding by default, try removing it and using CSS "text-align: center;" or "margin-left: auto; margin-right: auto; width: 800px"

Thanks, can you explain bit more? To what element should I add this CSS?

[Zakk]

I believe your issue stems from some Web standards errors, firstly you have:

<center>
     <img src="yourimage">
</center>

Img tags are INLINE tags and must be present in BLOCK LEVEL elements only. (Eg. Div, span, p). <center> is not a block level element. And from viewing your site with firebug it appears the <center> tag is creating too much space for your image. My suggested solution would be:

<div id="banner">
      <img src="imagehttp" />
</div>

Then create a CSS ID, center the image:

#banner {
      margin: 0 auto;
      padding: 0;
}

That should fix your problem, however to avoid mistakes like this again i suggest you learn about XHTML and CSS standards, and apply them to your future code to reduce the chances of errors like this happening again.

Hope this helps,

Zak ^^

Edited by Zakk, 27 May 2010 - 12:50 AM.
Posted too early.

[iVista]

Okay thanks... I just tried that. still no go. Check the link. Computer Engineering Department :: KFUPM

[l@mbd@]

well for starters your banner image is 165px in height, the div#banner is showing a height of 169px.

GET RID OF THE align="center" IT'S EVIL

#banner{
    width: 972px;
    height: 165px;
    margin: 0 auto;
    padding: 0;
}

[iVista]

Thanks that fixed it! But the problem is.. if I dont do center align... it does not come in the center! Please check! How do I make it come in the center! ?

EDIT: never mind.. I got it :)

THANKS A LOT EVERYONE!! :D

[l@mbd@]

Well I'm glad that fixed it. Now, keep in mind, to be a true page developer, you need to test your layout for IE6, IE7, IE8, and then everything else. Look into:

CSS Conditional Comments

Cheers