html issues

Started by diagostimo, October 24, 2012, 11:41:50 pm

Previous topic - Next topic

diagostimo

ok i have a new assignment for another website design at college, i have dove a little more into html this time, and i have a few issues, first this is my a littlye bit of code i was testing with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body class="body">
<img src="assets/page_top.png" width="951" height="23" class="body_image"><img src="assets/page_body.png" width="951" height="28" class="body_image"><img src="assets/page_bottom.png" width="951" height="26">
</body>
</html>

so i am drawing 3 images here, the top of the page, the body, and the bottom, previously i was writing my code in html 5, i came across a problem if i separated my images into lines like so:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body class="body">
<img src="assets/page_top.png" width="951" height="23" class="body_image">
<img src="assets/page_body.png" width="951" height="28" class="body_image">
<img src="assets/page_bottom.png" width="951" height="26">
</body>
</html>

my images would have a slight break in between each other, i have had this problem in the past but i resulted in inserting them in divs and reducing the y value of the div, resulting in different behaviors depending on the browser, as that is not practical i have looked further into the issue, currently i have changed my code to HTML 4.01 Transitional, now when i use this html type i get the same behavior when formatting the code like such, but if i have it all grouped like seen in the first code i dont get the breaks between images, which is what i want, but i was wondering what could be causing this, as it would be easier for me in the long run to format my code in such a way that is readable, also it would be good to know the benefits/differnces between the html types as i dont have a clue and im just going with any as of now:P

Memor-X

you said you tried putting the images in <div>'s however have you tried putting all 3 images in a single <div> and setting the align property

you could also try the padding:0px; in CSS and see if that removes the breaks

diagostimo

i did try the padding but not the allign, and thats done the trick, thankyou! :D