Member Avatar for zyzopath

My image and border fit well on 3 sides, except for the left border-side and I can't for the life of me figure out what I did wrong. Isn't it supposed to fit automatically when the css code is wrapping the image-tag?
The "surrounding" border only shows up in FF and not IE. Can anyone see why that is happening? I did use the "px" and all that to make it as much compatible as possible for these browsers :-(
I am practicing CSS and HTML, because right now my website is not really styled at all.
This is just a practice piece, but still. If I can't make this one work, then I won't be ale to make it work on my website either!
And please feel free to tell me if I made other errors as well, I'd really appreciate that :-)

Take care!
*Louise

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
  <title>The HTML Experiment!</title>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <style type="text/css">
  body{
  background-color:#E64A00;
	    border:double; color:#800000; width:700px;
  margin-left:5%;
  margin-right:50%;
  padding:40px;
}

h1{
font-family:arial; style:normal; color:#FFFFFF; font-size:80px; text-decoration:underline;
 }

p{
font-family:arial; font-style:italic; color:#FFFFFF; size:20px;
}


.class1 A{
 font-style:normal; color:#FFFFFF; text-decoration:none; 
}

 .class1 A:hover{
 font-size: 30px; font-weight:bold; color:#FFFFFF; text-decoration:underline;
 }
 
 .class2 A{
 font-style:normal; color:#000000; text-decoration:none; 
}

 .class2 A:hover{
 font-size: 30px; font-weight:bold; color:#000000; text-decoration:underline;
 }

 .dragon {
 border-style:ridge; border-color:#00A800; border-width:10px; }

 
  </style>
</head>
<body>
<h1>The Experiment</h1>
<p>
blaaaaahdiblaaaaah! <br>
<span class="class1"><a href="http://www.youtube.com" target="_blank">youtube</a></span><br>
and more blaaah<br>
<span class="class2"><a href="../home.html">Home</a></span><br></p>
<div class="dragon"><img src="dragon head_001.jpg" width="170" height="170" alt="Dragon"/></div>

</body>
</html>
  • 4 Contributors
  • 5 Replies
  • 2K Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

Two things are likely tripping you up here, . First, your doctype is incomplete, which puts old IE into quirks mode and changes how widths/borders are computed. Switch to a standards doctype right at the top. Also, IE can be picky if you rely on the text color to paint borders; set an explicit border color and width on the body instead of relying on the color property. (developer.mozilla.org)

<!doctype html>
<style>
  body { border: 3px double #800000; }
</style>

Second, for the green frame: your wrapper div is block-level (it expands to the full line), while <img> is inline by default. Make the wrapper shrink to the image, and make the image a block so the border hugs all four sides consistently. This avoids floats and table hacks. (developer.mozilla.org)

.dragon { display: inline-block; border: 10px solid #00a800; }
.dragon img { display: block; }

Nice call by about controlling defaults; after the change above, add only the margins you actually want. And +1 to : in IE, press F12 and check the computed box model to confirm there is no stray padding/margin. No need to float here (sorry ) unless you are flowing text around the image, in which case clear the float on the next block. Finally, if you still see a tiny gap, set .dragon { line-height: 0; } to neutralize inline whitespace around the image.

Recommended Answers

All 5 Replies

Member Avatar for harrierdh

I'd try toying with margin and padding on the img id "dragon". That's where IE differs the most from other browsers. If you don't already, get a debugger for IE like Firebug is for Firefox.

Member Avatar for zyzopath

Hey, thanks :-)

I couldn't make it work with that though... yet!
For some reason it helped putting the picture in a table!? Which for me doesn't really make sense, but I guess the most important thing is that it worked :-)

Take care!
*Louise

Member Avatar for Hangfire

Different browsers have different defaults for margin and padding.
I always start my css by defaulting all margins and padding to 0.

*{padding:0; margin:0;}

Some people would shoot me for that and say you need to specify all the elements you are using like this

body,h1,h2,div etc etc{padding:0; margin:0;}

So far i've not experienced any problems with using the * though.

Good luck

P.S. Please don't use a table to container your image.

Member Avatar for harrierdh

Hangfire,
I agree. I always set my margins and padding to zero for all elements first. I guess I don't want the browser to decide what values to assign to margins and padding. I like to know what the values are and set them myself.

zyzopath,
It's impossible to work with your code without your image. Post the image or a link to your site or the image.

Member Avatar for ko ko

Float your image, but floating makes overlapping problem. Floating the image would flow out of it's parent and it parent div can't wrap the image correctly. So you need to fix these browser bug. Try this:

.dragon img {
         float: left
         }
.dragon {
         overflow: hidden
        }

Use shorthand property, it help your code clean,readability and searchable.

border-style:ridge; border-color:#00A800; border-width:10px;

Instead of:

border: 10px ridge #00A800

Good luck..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.