Back To Website Design Forum

Image problem

  • iferno229
  • Born
  • Born
  • No Avatar
  • Joined: Dec 28, 2008
  • Posts: 3
  • Status: Offline

Post December 28th, 2008, 1:43 pm

Hey, I've managed to find solutions to most of my problems but I can't seem to fix this one. I have a placement banner that I'm using for now until I have time to create my own banner. The problem I have is that there is a margin around the image especially at the bottom that I cannot seem to remove. It creates a small gap between the image and my main menu. Once I remove the gap, I can start working on the drop shadow border and curved corners. I have tried setting the margin to 0 by creating a div tag and css. It doesn't work and I can't think of any ways to fix it. This is my website for reference:
http://students.washington.edu/mchen323 ... plate.html
By the way, I find my template to be too simple and plain. While I'm not looking for anything too complicated, I'd like to spice up my template a bit more. It is for a club at school and this is my first attempt at creating a site. Does anyone have any feedback on how I might improve the overall look? Thanks in advance.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post December 28th, 2008, 1:43 pm

  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Joined: May 29, 2005
  • Posts: 1417
  • Loc: 55° N, 3° W
  • Status: Offline

Post December 28th, 2008, 3:13 pm

Your page contains horribly invalid code (no offence meant). Unless someone can identify the exact problem I'd just remove the doctype stuff and start with <html><head>... etc. This will fix your problem.

With the doctype there you are forcing the browser to look at your code in "strict mode" - which can be unforgiving if your code contains a lot of errors.

Or you can start again? Lots of help available here at Ozzu.
  • ayelletkod
  • Novice
  • Novice
  • No Avatar
  • Joined: Dec 09, 2008
  • Posts: 17
  • Status: Offline

Post December 31st, 2008, 12:54 pm

the easy way is changing fonts, banner and logo, and add some affects on the margins.
the harder and better way is what mentioned above here.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Oct 30, 2007
  • Posts: 2008
  • Loc: Belgrade, Serbia
  • Status: Offline

Post January 1st, 2009, 5:08 am

I don't see a gap in the banner. (viewing on FF) did you fix it, or is it an IE issue?
Eagles may soar in the sky but weasels don't get sucked into jet engines.

celandine designblog
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post January 1st, 2009, 12:05 pm

I assume its an IE issue (although I didn't test it) In IE6/7 if you you have an image as the last item in a container and your code contains a line return after the img close and before the container close you will get a phantom space on the bottom (several pixels)

so...
Code: [ Select ]
<div>
<img src="myfile.jpg"/>
</div>
  1. <div>
  2. <img src="myfile.jpg"/>
  3. </div>
will produce the phantom line break while
Code: [ Select ]
<div>
<img src="myfile.jpg"/></div>
  1. <div>
  2. <img src="myfile.jpg"/></div>
will not produce the problem. Easiest fix is to simply remove that line break.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • iferno229
  • Born
  • Born
  • No Avatar
  • Joined: Dec 28, 2008
  • Posts: 3
  • Status: Offline

Post January 1st, 2009, 1:41 pm

I changed DOCTYPE from strict to transitional and it fixed the problem. Thanks. When I went to http://validator.w3.org/ to validate my code, I got 7 errors which all pertained to centering the text in my menu. How do I go about fixing this?
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post January 1st, 2009, 3:42 pm

what were the errors?
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • iferno229
  • Born
  • Born
  • No Avatar
  • Joined: Dec 28, 2008
  • Posts: 3
  • Status: Offline

Post January 1st, 2009, 8:54 pm

# Error Line 15, Column 25: document type does not allow element "center" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.

Code: [ Select ]
<li><a href="#"><center>Home</center></a></li>


The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
Moderator Remark: added code tags
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Joined: Jul 18, 2008
  • Posts: 239
  • Loc: Western Australia
  • Status: Offline

Post January 1st, 2009, 11:47 pm

The center element was deprecated in HTML 4.01, and is not supported in XHTML 1.0 Strict DTD.

You should use CSS to centre text :)

For example:

Code: [ Select ]
<STYLE type="text/css">
li {text-align: center}
</STYLE>

<li><a href="#">Home</a></li>
  1. <STYLE type="text/css">
  2. li {text-align: center}
  3. </STYLE>
  5. <li><a href="#">Home</a></li>
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8212
  • Loc: USA
  • Status: Offline

Post January 2nd, 2009, 11:30 am

alex89 wrote:
The center element was deprecated in HTML 4.01, and is not supported in XHTML 1.0 Strict DTD.

You should use CSS to centre text :)

For example:

Code: [ Select ]
<STYLE type="text/css">
  li {text-align: center}
</STYLE>
 
<li><a href="#">Home</a></li>
  1. <STYLE type="text/css">
  2.   li {text-align: center}
  3. </STYLE>
  4.  
  5. <li><a href="#">Home</a></li>

Don't use upper-case code... use lowercase... instead of 'STYLE' use 'style'
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Joined: Jul 18, 2008
  • Posts: 239
  • Loc: Western Australia
  • Status: Offline

Post January 2nd, 2009, 7:39 pm

You're terribly fussy. I just copied it from http://www.w3.org/TR/REC-html40/present/styles.html
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8212
  • Loc: USA
  • Status: Offline

Post January 2nd, 2009, 10:49 pm

alex89 wrote:
You're terribly fussy. I just copied it from http://www.w3.org/TR/REC-html40/present/styles.html

:lol: I usually go to the standards of XHTML Strict... kind of automatic you know.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • vividwebgraphics
  • Novice
  • Novice
  • No Avatar
  • Joined: Jan 26, 2009
  • Posts: 23
  • Loc: USA
  • Status: Offline

Post February 10th, 2009, 11:33 am

You need to add this code in <head>
Code: [ Select ]
<style type="text/css">
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
</style>
  1. <style type="text/css">
  2. body {
  3.     margin-left: 0px;
  4.     margin-top: 0px;
  5.     margin-right: 0px;
  6.     margin-bottom: 0px;
  7. }
  8. </style>


once you add this... you will not find any gap
Moderator Remark: added code tags

Page 1 of 1

Post Information

  • Total Posts in this topic: 13 posts
  • Users browsing this forum: No registered users and 178 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.