...

View Full Version : White boxes below images.



emedia
03-12-2009, 05:32 PM
White boxes below images.
Looking for some constructive help on an issue I am having on a website that I am working on.
http://www.brugomug.com/about_brugo.html
On all of the pages that are designed like the "about" page, there is a white box appearing below the 2 graphics at the top of the page.
Interesting part in that it is NOT happening in IE... However in FireFox it is happening. Usually this happens the opposite - the problem is in IE and not other browsers that are more compliant with W3C standards.
I am wondering if it is a specific issue pertaining to IE as there are serious problem that have been plaguing IE over the years - not being compliant with W3C standards.
Any ideas of what is going on here?
Thanks, Brent

abduraooft
03-12-2009, 05:41 PM
Do you know why tables for layout is very bad (http://www.hotdesign.com/seybold/)?

I'd recommend you to check http://www.bonrouge.com/2c-hf-fixed.php, which is a good table less layout.

Also, read the importance of having a good DOCTYPE (http://www.alistapart.com/articles/doctype/), your current one is incomplete.

After all, validate your site and the errors in your markup (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.brugomug.com%2Fabout_brugo.html&charset=%28detect+automatically%29&doctype=Inline&group=0).

emedia
03-12-2009, 05:51 PM
Thank you for all of this info! I will check it out. Unbelievable - all of the errors! I am new to this and have inherited this site from another developer.
Thanks again for the quick reply!

mwgriffin
03-12-2009, 07:01 PM
I would definitely second what abduraooft said. I would also propose that you not use the flash logo at the top. Using flash, and integrating it into the page's layout can be tricky. I would suggest that you instead use a gif animation sequence, if you wanted it to be animated. Also once you're done cleaning up the page, take the time to design a favicon image. You can use a simple generator like this one : http://tools.dynamicdrive.com/favicon/ It will definitely make your website seem more professional.

Rowsdower!
03-12-2009, 07:07 PM
I would definitely second what abduraooft said. I would also propose that you not use the flash logo at the top. Using flash, and integrating it into the page's layout can be tricky. I would suggest that you instead use a gif animation sequence, if you wanted it to be animated. Also once you're done cleaning up the page, take the time to design a favicon image. You can use a simple generator like this one : http://tools.dynamicdrive.com/favicon/ It will definitely make your website seem more professional.

Good advice on the favicon but I'd have to disagree (sorry!) about losing the flash. You might want to have a static PNG image load as a backup if flash is disabled but I think your quality will suffer if you abandon the flash all together. Besides, I think it's a really nice little logo sequence. Very subtle and tasteful.

mwgriffin
03-12-2009, 07:11 PM
Here I actually quicky just made one for you to save you the trouble, although you should still practice it so that you learn how to do it. you can find it on my website here: http://www.mwgriffin.com/Storage/favicon.ico save it to your computer, upload it to your site, and just put that in the same folder as your main index page and insert this line of code in the header portion of what ever page you want to display it:


<link rel="shortcut icon" href="favicon.ico" />

mwgriffin
03-12-2009, 07:13 PM
yeah I just suggested loosing the flash part only if a solution couldn't be found. I too enjoy it. But I'd have a static back up for some visitor who doesn't have flash.

emedia
03-12-2009, 10:02 PM
Thank you ALL for the great feedback and information - I have so much to learn:eek:

How do you know which DOCTYPE to use???

Fumigator
03-12-2009, 10:26 PM
You can go to W3C to find the correct format for doctypes.

http://www.w3.org/QA/2002/04/valid-dtd-list.html

You should try to use strict XHTML 1.0 if you can, as it is the most compliant going forward into the future.

mikemacx
03-12-2009, 11:04 PM
I think you're possibly missing a </table> tag about here:


<td width="140"><a onMouseOver="changeImages('see_brugo_button','images/see_brugo_button-over.gif');return true" onMouseOut="changeImages('see_brugo_button','images/see_brugo_button.gif');return true" href="see_brugo.html"><img id="see_brugo_button" src="images/see_brugo_button.gif" alt="See Brugo" name="see_brugo_button" border="0"></a></td>
</tr>
</table>
</td>
</tr>
</table>


When i change the bgcolor from white to black here:

<td rowspan="2" valign="top"><csobj csref="../brugo.com.data/Components/sub-page_top.html" h="104" occur="65" t="Component" w="779">
<table width="779" border="1" cellspacing="0" cellpadding="0" align="center" bgcolor="black">


the extra space turned black where it was showing up white on the page.

It could be possible that the borders of your multiple nested tables are creating whitespace, but I'm not sure. just change the bgcolor to black first and then see.

emedia
03-13-2009, 12:21 AM
A solution to my problem :thumbsup:

Add this rule to your stylesheet...
Code:

object {
display:block;
}


Like the img element the object element is an inline element and can often cause the problem that you have experienced.

Further reading:-

* Eric A. Meyer article (http://devedge-temp.mozilla.org/viewsource/2002/img-table/)

mwgriffin
03-13-2009, 12:41 AM
hey awesome. Did you check out the favicon i created for you? It's just there to illustrate what you can easily do to make your website look a little better.

mikemacx
03-13-2009, 02:17 AM
I still see the whitespaces......did you change the code yet?

Also, the graphics are out of line, so they are offset from the main graphic.

emedia
03-15-2009, 02:53 PM
Thanks Mike!
Take a look now... We had some other issues going on as I messed with the align and valign code.
Thanks MW!
I will need to present the favicon to the client for approval - Great idea! They are in the midst of a redesign and I can definitely see them using one in that redesign.

mwgriffin
03-15-2009, 05:39 PM
Yeah, well the favicon doesn't obviously have to be that, but it would make sense as it's the logo of the company. One more thing that I noticed is that for your flash animation at the top of the page, I noticed that it is linking back to the "index.html". I suggest changing that link to this: http://www.brugomug.com as it will not then display the "index.html" in the url, just something small, but hey every little bit counts. I'll look over the website and see if I can find any other improvements that could be made. Looks good so far though. Good job



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum