CODEWITHSUNDEEP
htmlcssinternet-explorer
Shadymilkman01
Shadymilkman01

Reputation: 323

white-space: no-wrap in IE not working

This works fine in chrome but IE doesn't like it and breaks the content-main div's. Checked for word-wrap: break-word as noted here white-space: nowrap is not working in IE in a horizontally scrolling box but I don't have that anywhere.

Here's a fiddle http://jsfiddle.net/02hgaahe/ although the fiddle in IE displays correctly.... odd.

Here's my code.

HTML-

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jan 7, 2015, 2:31:39 PM
*/

body {
		font-family:arial,helvetica,sans-serif;
		font-size:12px;
	}
        #wrapper {
		
		margin:0px auto;
		border:1px solid #bbb;
		padding:10px;
                height: 90%;
	}
        #header {
		border:1px solid #bbb;
		height:80px;
		padding:10px;
	}
        #header > #content-main{
            width:200px;
            height:80px;
            border: 1px solid #bbb;
        }
	.content {
            
		margin-top:10px;
		padding-bottom:10px;
                white-space: nowrap;
                overflow-x: visible;
                overflow-y: hidden;
                height:320px;
	}
	.content div {
		border:1px solid #bbb;
	}
	.content-main {
            display: inline-block;
		width:500px;
                height:300px;
	}
	#footer {
		margin-top:10px;
		padding:10px;
		border:1px solid #bbb;
	}
	#bottom {
		clear:both;
		text-align:right;
	}
<div id="wrapper">
            <div id="header">Header</div>
            <div class="content">
                <div class="content-main">Left</div>
                <div class="content-main">main</div>
                <div class="content-main">right</div>
                <div class="content-main">right</div>
                <div class="content-main">right</div>
                <div class="content-main">right</div>
                <div class="content-main">right</div>
                <div class="content-main">right</div>
                <div class="content-main">right</div>
            </div>
            <div id="footer"></div>
            <div id="bottom"></div>
        </div>

Edit: Removed duplicate ID's and incorrect comment.

It is still displaying incorrectly though.

Edit: I think the issue was with Internet Explorer's compatibility settings for intranet sites, I didn't know that IE defaulted all intranet sites to compatibility mode (basically IE7).

Upvotes: 0

Views: 352

Answers (2)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Time for a shot in the dark!

Did you remember <!DOCTYPE html> at the start of your HTML file? Without it, older IE versions will default to Quirks Mode, which may not behave properly when it comes to CSS.

Upvotes: 2

jbutler483
jbutler483

Reputation: 24549

I believe the issue here is that you're using repeating id's.

If you want to 'duplicate' the effects of one div onto another, try using a class instead.

Using classes makes the 'class' reusable, unlike using 'id's, which should be unique and not repeated. Duplicating ID's cause all sorts of funny bugs/glitches.

Something like:

body {
  font-family: arial, helvetica, sans-serif;
  font-size: 12px;
}
#wrapper {
  margin: 0px auto;
  border: 1px solid #bbb;
  padding: 10px;
  height: 90%;
}
#header {
  border: 1px solid #bbb;
  height: 80px;
  padding: 10px;
}
#header > #content-main {
  width: 200px;
  height: 80px;
  border: 1px solid #bbb;
}
#content {
  margin-top: 10px;
  padding-bottom: 10px;
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
  height: 320px;
}
#content div {
  /*padding:10px;*/
  border: 1px solid #bbb;
}
.content-main {
  display: inline-block;
  width: 500px;
  height: 300px;
}
#footer {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #bbb;
}
#bottom {
  clear: both;
  text-align: right;
}
<div id="wrapper">
  <div id="header">Header</div>
  <div id="content">
    <div class="content-main">Left</div>
    <div class="content-main">main</div>
    <div class="content-main">right</div>
    <div class="content-main">right</div>
    <div class="content-main">right</div>
    <div class="content-main">right</div>
    <div class="content-main">right</div>
    <div class="content-main">right</div>
    <div class="content-main">right</div>
  </div>
  <div id="footer"></div>
  <div id="bottom"></div>
</div>

As a side note, as @James said, comments in css look like /*comment*/ and not //comment

Upvotes: 1

Related Questions