Forum Moderators: not2easy
I got a problem with firefox, and not ie 7, in the latter my code actually works. I want to make a grid with divs. In order to do so i use a container div for the row and one class of divs for the cells:
html code:
<html>
<head>
<title>Link Rollover</title>
<link href="rolloverTest.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="outerBox">
<div class="row1">
<div id="leftTop">gdhgsfamhfs adhfszj hbfj,asj bfljs abfmj hbsdfa bljashbf ljhbjmndmnaf mnfn ndmnmnmajdjsa</div>
<div id="middleTop">activity2</div>
<div id="rightTop">activity3</div>
<div id="rightTop">activity3</div>
</div>
<div class="row2">
<div id="leftMiddle" onMouseOver="initImage('image8')" onMouseOut="hidediv('image8')">activity8</div>
<div id="middleMiddle"></div>
<div id="rightMiddle" onMouseOver="initImage('image4')" onMouseOut="hidediv('image4')">activity4</div>
</div>
</div>
</body>
</html>
and the css:
@charset "utf-8";
/* CSS Document */
body{ text-align:center;
background-color:#333;
}
#leftTop {
display:inline;
background-image:url(afbeeldingen/box.png);
background-repeat:no-repeat;
height:250px;
width:180px;
padding:15px;
overflow:auto;
border:2pt solid red;
}
#middleTop {
display:inline;
background-image:url(afbeeldingen/box.png);
background-repeat:no-repeat;
height:110px;
width:180px;
padding:15px;
border:2pt solid red}
#rightTop {
display:inline;
background-image:url(afbeeldingen/box.png);
background-repeat:no-repeat;
height:110px;
width:180px;
padding:15px;
border:2pt solid red
}
#leftMiddle {
display:inline;
background-image:url(afbeeldingen/box.png);
background-repeat:no-repeat;
height:110px;
width:180px;
padding:15px;
border:2pt solid red}
#middleMiddle {
display:inline;
background-image:url(afbeeldingen/boxBig.png);
background-repeat:no-repeat;
height:157px;
width:377px;
padding:15px;
z-index:1;
border:2pt solid red}
#rightMiddle {
display:inline;
background-image:url(afbeeldingen/box.png);
background-repeat:no-repeat;
height:110px;
width:180px;
padding:15px;
position:relative;
border:2pt solid red}
.row1{
padding-bottom:10px;
padding-top: 10px;
border:2pt solid green
}
.row2{
padding-bottom:10px;
padding-top: 10px;
border:2pt solid yellow}
in ie 7 this works, the height and width of the divs are kept, so text is forced to stay within the defined div.
in firefox (3.0) the width and height attributes seemed to be ignored.
anyone knows why?
thanks in advance!
jorrit
See some note by suzyuk on support by browsers and how to work with them:
[webmasterworld.com...]
The real solution is even simpler: stop using IE during development and develop in any standards compliant browser.
One of the tell-tale signs is e.g. "position:relative;" without any top/bottom/left or right: it's not supposed to do a thing ... as you enable the ability to shift the position about but you're not shifting it at all.
It seems you're redoing tables with divs. It doesn't sound right to do that, IMHO, you're better of with real tables if you try that.
