Problem with whitespace in nested divs with IE

Get Started
1

Hi to all,

I am using this code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<meta name="author" content="">
<meta http-equiv="Reply-to" content="@.com">
<meta name="generator" content="PhpED 5.8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="creation-date" content="01/01/2009">
<meta name="revisit-after" content="15 days">
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
  <div style="white-space: nowrap;">ovde prvi tekst ide
  <div style="width: 20px; white-space: normal; word-wrap:break-word; word-break: normal;">oasd fksl lfasdk falsdf asdf oasd fksl lfasdk falsdf asdf oasd fksl lfasdk falsdf asdf oasd fksl lfasdk falsdf asdf oasd fksl lfasdk falsdf asdf
  </div>
  </div>
</body>
</html>

In IE text in nested div is shown in one line and width is bigger then 20px. I want to force text to wrap and width of div have to be 20px. Is it possible to achive something like that but only with CSS style without adding new tags in nested div.
Also in container div white-space needs to be nowrap. If not I have to make a lot of changes.
Problem occurs only in IE. In FF is working fine.

Any suggestion?
Greetings and thanks in advance

2

Hi welcome to SPF. First of all You should not use any inline styles! Can you try to illustrate what it is you want? Maybe a link to a page or something.

3

Here is the link:

http://www.web2core.com/noname1.html

Open link in IE and in FF. You will see the difference

Thaks

4

Sorry, why the white-space: nowrap on the parent div?

It looks like IE7 at least is simply not allowing the white-space: normal to override the parent’s white-space: nowrap.

5

Here is live example

http://www.jakovsistem.com/shop/index.php?page=shop.browse&category_id=13586&option=com_virtuemart&Itemid=27

go over second banner.

I need laptops to be in same line. That why I putted nowrap

6

Ah. I had to turn on Javascript to see what you meant.

Don’t use white-space: nowrap there. Instead, make div.popup have a set width that’s wide enough that the inline images/anchors already don’t wrap.

Ideally they should NOT wrap unless their box is not wide enough. This means the inner content area width, so padding counts against this (presses inside).

So add up the total widths of all those images (including side margins and side padding and the borders) and make sure popup is at least that wide.

This will get you around IE’s issue later.

7

I will try.

Thanks

8

Let us know!