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
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.