5 Replies - 1732 Views - Last Post: 16 March 2013 - 12:53 PM

#1 gravity226  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 01-January 09

Not showing up in Internet Explorer Properly

Posted 16 March 2013 - 08:19 AM

Hey everyone,
Thanks for stopping by. So I copied this code out of my school book and it looks great in Maxthon (my preferred browser) and it looks exactly like it does in the book. When I open it in Internet Explorer it doesn't look the same. Can anyone tell me why? Basically I want the grey box to only come up half way behind the blue box.

I am very much a beginner when it comes to CSS so any help is greatly appreciated. This isn't homework by the way I'm trying to make a template for my own site. :)

Thanks,
Tommy

My HTML & CSS Code:

<html lang="en">
  <head>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>TJM</title>
	
	<style type="text/css">
		
		fieldset {
			background-color: #f1f1f1;
			border: none;
			border-radius: 2px;
			margin-bottom: 12px;
			overflow: hidden;
			padding: 0 10px;
		}
		
		legend {
			background-color: #dedede;
			border-bottom: 1px solid #d4d4d4;
			border-top: 1px solid #d4d4d4;
			border-radius: 5px;
			box-shadow: 3px 3px 3px #ccc;
			color: #fff;
			font-size: 1.1em;
			margin: 12px;
			padding: 0.3em 1em;
			text-shadow: #9FBEB9 1px 1px 1px;
			text-transform: uppercase;
		}
		
		legend.selected {
			background-color:#0B5586;
		}
		
		legend.notselected {
			background-color: #4494C9;
		}
		
		ul {
			background-color: #fff;
			border: 1px solid #eaeaea;
			list-style: none;
			margin: 12px;
			padding: 12px;
		}
		
		ul li {
			margin: 0.5em 0;
		}
		
		inner {
			background-color: #fff;
			border: 1px solid #eaeaea;
			list-style: none;
			margin: 12px;
			padding: 12px;
			margin: 0.5em 0;
		}
		
		label {
			display: inline-block;
			padding: 3px 6px;
			text-align: right;
			width: 150px;
			vertical-align:top;
		}
		
		.small {
			width: 75px;
		}
		
		.medium {
			width: 150px;
		}
		
		.large {
			width: 250px;
		}
		
		body {
			font-family: "Comic Sans MS", sans-serif;
		}

	</style>
	
  </head>
  <body>
  
	<fieldset>
	
		<legend class="selected"> Yoi </legend>
		
		<ul> 
			
			hi <br>
			me too <br>
			
			
		</ul>
	
		One more thing...
		
	</fieldset>
  </body>


Attached image(s)

  • Attached Image
  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Not showing up in Internet Explorer Properly

#2 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Not showing up in Internet Explorer Properly

Posted 16 March 2013 - 10:24 AM

What textbook are you using? This is some odd css. I assume the left image is what you were wanting to achieve. Basically if you want div's to overlap one another you need to use the position attribute.
#legend.selected {
    position: absolute;
    top: -15px;
}


What that tells the browser is to position the div independent of the flow. I used 'top' to move the div up using a negative integer. If I used a positive integer it would have moved the div downwards. You can do the same with left,right, and bottom.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,543
  • Joined: 12-December 12

Re: Not showing up in Internet Explorer Properly

Posted 16 March 2013 - 10:45 AM

@FerretHolmes legend is not an ID (#legend) and I would certainly not encourage the use of absolute-positioning, especially to someone just starting out.

In fact, absolute-positioning is one of the very last features I would turn to, to try a fix a page.

@OP ULs should only contain LI elements; if you correct this then you won't need the BR tags. And all content should be contained within a tag (One more thing..).

And your page requires a valid DOCTYPE without which IE will drop into quirks mode. A valid DOCTYPE should always be present.

This post has been edited by andrewsw: 16 March 2013 - 10:46 AM

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,543
  • Joined: 12-December 12

Re: Not showing up in Internet Explorer Properly

Posted 16 March 2013 - 10:50 AM

View PostFerretHolmes, on 16 March 2013 - 10:24 AM, said:

What textbook are you using? This is some odd css. I assume the left image is what you were wanting to achieve. Basically if you want div's to overlap one another you need to use the position attribute.
#legend.selected {
    position: absolute;
    top: -15px;
}


What that tells the browser is to position the div independent of the flow. I used 'top' to move the div up using a negative integer. If I used a positive integer it would have moved the div downwards. You can do the same with left,right, and bottom.

@FerretHolmes If you wish to move something slightly out of position, prefer relative to absolute positioning or, preferably, use (possibly negative) margins.
Was This Post Helpful? 0
  • +
  • -

#5 Koyume  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 89
  • Joined: 19-February 13

Re: Not showing up in Internet Explorer Properly

Posted 16 March 2013 - 12:31 PM

I would never use negative margins at all. Some browsers and most designs will fudge it up (As it will hide it). If you have to use it, it might be better to look at other ways in positioning and use positive margins. Negative margins usually hide (in my opinion.)

This post has been edited by Dormilich: 16 March 2013 - 05:53 PM

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,543
  • Joined: 12-December 12

Re: Not showing up in Internet Explorer Properly

Posted 16 March 2013 - 12:53 PM

Negative margins have their place in CSS, occasionally used to nudge an element into (or out of) position, among other things. But they are not a substitute for (correct) positioning or other display/layout properties.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1