Ingolme Posted March 9, 2010 Share Posted March 9, 2010 In Standards Compliant mode, images have a small space below them because they're inline. You can solve that by setting the vertical-align property of the image to "middle" Link to comment Share on other sites More sharing options...
yertle Posted March 9, 2010 Share Posted March 9, 2010 I'm such a noob.When I add padding and margin to the img in the body, I get validity errors.When I add vertical-align:middle to the css, I do not see any change. Link to comment Share on other sites More sharing options...
boen_robot Posted March 9, 2010 Share Posted March 9, 2010 Oh, right. I had forgotten that images are inline.... in that case, make all imgs block elements, or at least the ones in the imagecenter divs, like so: .imagecenter img {display:block;} Link to comment Share on other sites More sharing options...
yertle Posted March 9, 2010 Share Posted March 9, 2010 Still no luck.Going through the image tuts.. Link to comment Share on other sites More sharing options...
thescientist Posted March 10, 2010 Share Posted March 10, 2010 what does your code look like? When you are having problems, always feel free to post your most current code/link after you've made a change. Link to comment Share on other sites More sharing options...
migroo Posted March 10, 2010 Share Posted March 10, 2010 Sorry just ignore this one. Link to comment Share on other sites More sharing options...
yertle Posted March 10, 2010 Share Posted March 10, 2010 http://www.djisaacm.comThere is a small space between the top blue graphic and the yellow background paragraph. I've tried all suggestions and implemented them properly *I think* but I can't get that white space to go away.When I inspect it with firebug I can see that it is something to do with my div class- when I hover over the code I see how the outline around the topmost blue wave graphic does include this extra space. When I do the same to the lower blue wave graphic the outline does not seem to include any extra space.I will post the code here if you prefer; ksorry if this takes up too much space!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta name="description" content="Dance Music, DJ, Boneshakers, Athens GA" /><meta name="keywords" content="Isaac McCalla, DJ Isaac McCalla, DJ Isaac M" /><meta name="author" content="Isaac McCalla" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>djisaacm :: index</title><style type="text/css">/*<![CDATA[*/ body { background-color:white; padding:30px; margin:0; } p { font-family:Verdana, Geneva, sans-serif; font-weight:bold; font-size:14px; text-align:center; padding:12px; background-image:url('images/bg3.gif'); margin:0; } .imagecenter { text-align:center; margin:0; padding:0; display:block; border:0; } span.c1 { cursor:wait; }/*]]>*/</style></head><body><div class="imagecenter"><img src="images/header_top_white.gif" alt="djisaacm - header" /></div><p><span class="c1">Gone fishin'!</span></p><div class="imagecenter"><img src="images/header_bottom_white.gif" alt="djisaacm - footer" /></div></body></html> Link to comment Share on other sites More sharing options...
thescientist Posted March 10, 2010 Share Posted March 10, 2010 Speaking of validation I have a page that validates perfectly but I still am having display problems with it.Here is a link: My web siteI apologize for the size of my pages I made them way way to wide. This is one of my first attempts to make a website and I am doing it on a new computer that has a 20.1", my old one had a 15", screen so I wasn't thinking when I made it. It displays fine in FireFox but it messes up in IE and Google Chrome I have not checked it on other browsers.In FireFox it looks like this: In Google Chrome it looks like this (note that my header image has bean pushed down): I think I am miss-using tables again Anyone know why it is doing this?Also I found a really nice tool for validating webpages its an ad on for FireFox: Web Developer.this should probably be in its own thread. I would recommend not using tables for what you are trying to do. Use lists instead for navigation, or divs with background images. Tables are only meant for displaying tabular data. Link to comment Share on other sites More sharing options...
thescientist Posted March 10, 2010 Share Posted March 10, 2010 http://www.djisaacm.comThere is a small space between the top blue graphic and the yellow background paragraph. I've tried all suggestions and implemented them properly *I think* but I can't get that white space to go away.When I inspect it with firebug I can see that it is something to do with my div class- when I hover over the code I see how the outline around the topmost blue wave graphic does include this extra space. When I do the same to the lower blue wave graphic the outline does not seem to include any extra space.I will post the code here if you prefer; ksorry if this takes up too much space!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta name="description" content="Dance Music, DJ, Boneshakers, Athens GA" /><meta name="keywords" content="Isaac McCalla, DJ Isaac McCalla, DJ Isaac M" /><meta name="author" content="Isaac McCalla" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>djisaacm :: index</title><style type="text/css">/*<![CDATA[*/ body { background-color:white; padding:30px; margin:0; } p { font-family:Verdana, Geneva, sans-serif; font-weight:bold; font-size:14px; text-align:center; padding:12px; background-image:url('images/bg3.gif'); margin:0; } .imagecenter { text-align:center; margin:0; padding:0; display:block; border:0; } span.c1 { cursor:wait; }/*]]>*/</style></head><body><div class="imagecenter"><img src="images/header_top_white.gif" alt="djisaacm - header" /></div><p><span class="c1">Gone fishin'!</span></p><div class="imagecenter"><img src="images/header_bottom_white.gif" alt="djisaacm - footer" /></div></body></html>maybe try adding padding: 0 to the <p> tag? It could be because it is a block level element too and could have its own default padding. Also, there is a CSS trick called the universal selector, which some of us use to remove all default margins and paddings (or anything else you want) to all elements. This is what it looks like:* {margin: 0px;padding: 0px;} This would set all elements margins and paddings (top, bottom, left, and right) to 0. From this point forward, it would be up to you set explicitly all the margins and padding per class/id as you go along. Some see it as being helpful and taking out little random browser rendering defaults. Link to comment Share on other sites More sharing options...
yertle Posted March 10, 2010 Share Posted March 10, 2010 I like the universal selector trick, thanks.Well, I added those changes but still get some type of white margin, padding, or I don't know between the top graphic and the paragraph.http://www.djisaacm.com Link to comment Share on other sites More sharing options...
boen_robot Posted March 10, 2010 Share Posted March 10, 2010 @yertleIt's my fault that I first wrote .imagecenter {display:block;} I later edited it (and I see you haven't...) to: .imagecenter img {display:block;} You want to make the images in .imagecenter block elements, not the .imagecenter div itself (which is already a block element). Link to comment Share on other sites More sharing options...
yertle Posted March 10, 2010 Share Posted March 10, 2010 That did the trick. Thanks! Link to comment Share on other sites More sharing options...
anarchojoseph Posted March 11, 2010 Share Posted March 11, 2010 you just use notepad? :/ Link to comment Share on other sites More sharing options...
thescientist Posted March 11, 2010 Share Posted March 11, 2010 actually these days I have been using Context. I started out on notepad when I first started designing. Link to comment Share on other sites More sharing options...
Synook Posted March 11, 2010 Share Posted March 11, 2010 PSPad is much better. :)But anyway there is a HTML editors thread here: http://w3schools.invisionzone.com/index.php?showtopic=760 Link to comment Share on other sites More sharing options...
2kanman Posted April 5, 2010 Share Posted April 5, 2010 Well as far as I understand HTML/XHTML validation isn't critical.... it isn't really necessary for me as I kind of do it myself. Link to comment Share on other sites More sharing options...
Synook Posted April 5, 2010 Share Posted April 5, 2010 In a perfect world, everyone would write perfect code the first time round, but in reality there are always things we miss. That's why there are external tools to help us. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.