Image problem

  • iferno229
  • Born
  • Born
  • iferno229
  • Posts: 3

Post 3+ Months Ago

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.
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

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
  • ayelletkod
  • Posts: 17

Post 3+ Months Ago

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
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

I don't see a gap in the banner. (viewing on FF) did you fix it, or is it an IE issue?
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1827
  • Loc: In the Great White North

Post 3+ Months Ago

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.
  • iferno229
  • Born
  • Born
  • iferno229
  • Posts: 3

Post 3+ Months Ago

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
  • Posts: 1827
  • Loc: In the Great White North

Post 3+ Months Ago

what were the errors?
  • iferno229
  • Born
  • Born
  • iferno229
  • Posts: 3

Post 3+ Months Ago

# 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
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

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. <li><a href="#">Home</a></li>
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

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'
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

You're terribly fussy. I just copied it from http://www.w3.org/TR/REC-html40/present/styles.html
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

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.
  • vividwebgraphics
  • Novice
  • Novice
  • vividwebgraphics
  • Posts: 23
  • Loc: USA

Post 3+ Months Ago

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

Post Information

  • Total Posts in this topic: 13 posts
  • Users browsing this forum: No registered users and 20 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.