CSS - Moving Site Messes Up Css

Hi all,
with your great help, the pages looks now almost fine in both IE and FF.
But, the photogallery looks much more better with all the photos bordered, like on this screenshot from FireFox. Unfornutely, when you check it in IE, all the images are messed around in a totally upredictable way (screenshot from IE). It was the same using vertical-align, but it's not so essential.

So, is there please any solution to handle this?
And is there a way how to center floating <div> within his parent <div> ("Unfortunately, there is no easy way to center floated elements." - But is there any way)? The red bordered div is floating, including all the images put in <div>, which are floating too, I'd love center the red bordered <div> inside the green bordered one. To be specific, I don't insist on the red bordered div to be floating, I just looking for a way how to center all the images inside the green bordered <div>.

Here are CSS used: Fotogalerie.css, Web.css.

Webdesign isn't really easy thing to learn , if all would work how it's supposed to work, it'd wonderful, but IE makes it all 3times harder , I really start to not to like him (more than before )

problems with positions divs and images within them ...

when I have a positioned div, and I insert an image, or another div with image inside, it makes the div too high, and not sure how to get it straight.

Code:

	?>
           			<div id="cmp" style="position: absolute; left: <?=$cmp_left*$x_scale+$offx+$leftcolwidth+$xspace  ?>px; top: <?=(($startrow*$y_scale)+($cmp_y)*$y_scale)-$offy ?>px; width: <?=($cmp_right-$cmp_left)*$x_scale+$leftcolwidth+$xspace ?>; height: <?=$y_scale+1 ?>; background-color: <? if( $cmp_row[ $j ] != null ) echo $cmp_row[ $j ]->type->getcolour( -1, $connect );  ?>; border: solid black 1px; z-index:<?=$i ?> " >
           				<div style="position: absolute; left: <?=$cmp_left*$x_scale+$offx+$leftcolwidth+$xspace  ?>px;  width: <?=($cmp_right-$cmp_left)*$x_scale+$leftcolwidth+$xspace-20 ?>; height: <?=$y_scale ?>;" align="left" width="20px" height="<?=$y_scale ?>px">
           					<? if( $cmp_row[ $j ] != null ) echo substr( rtrim( $cmp_row[ $j ]->getName() ), 0, $maxchars  ); ?>
           				</div>
           				<div style="position: absolute; left: <?=$cmp_right*$x_scale+$offx+$leftcolwidth-20  ?>px; width: <?=20 ?>; height: <?=$y_scale ?>; align: right" >
           					<img  src="images/<?=$icon ?>" alt=<?=$alt ?> border="0" <?=$mousey ?>>
           				</div>	
           			</div>
           		
           		<?

the code above has got a bit messy with trying to fix the problem...


Cheers
Adam

Hi guys,

This is another standard "why won't it work in IE"-post. I'm making a multi-column news-style site (<spam>first link in my signature</spam>), and IE screws up the widths. The layout is basically three .col's which are floated left, and a #menu on the right.

Here's the relevant css:

Code:

#menu
{
    float: left;
    margin-left: 0%;
    width: 20%;
    line-height: 120%;
    padding: 2%;
    font-size: larger;
}

.col
{
    float: left;
    width: 24%;
    font-size: 0.8em;
}

.col ul{ 
    list-style-type: none; 
    padding-left: 0;
}


.col .story{
    background: #F5F8ED;
    padding: 0 ;
    margin: 1%;
    border: 1px solid #71804D;
    color: #333;
    text-align: justify;
    
}

Here's some example html:

Code:

<div class="col">
    <ul>
		<li class="story">
            <p class="story_title"> story title </p>
            <div class="story_body">
                <p>blah blah</p>
            </div>
            <div class="sub">
				<p>stuff</p>
			</div>
        </li>
	</ul>
</div>
<div class="col">
    <ul>
		<li class="story">
            <p class="story_title"> story title </p>
            <div class="story_body">
                <p>blah blah</p>
            </div>
            <div class="sub">
				<p>stuff</p>
			</div>
        </li>
	</ul>
</div>
<div class="col">
    <ul>
		<li class="story">
            <p class="story_title"> story title </p>
            <div class="story_body">
                <p>blah blah</p>
            </div>
            <div class="sub">
				<p>stuff</p>
			</div>
        </li>
	</ul>
</div>

<div id="menu">
    <div id="menu_title">
        <h1> title </h1>
    </div>

    <ul id="navbox">
        <li> ... </li>
    </ul>

    ... etc

</div>        

The problem is that IE renders the .col's very narrowly, and has some major space vertically between them. This means that #menu gets pushed down below the .col's. Can anyone point me in the right direction to fix this width issue?

Thanks,
Simon

As per suggestion, I have created a new thread in this forum.
This is a follow on from my thread in the Javascript forum

I have created a table which displays exactly how I want it to.
It displays correctly in IE8, FF3.6, Opera & Chrome.
What I've done is created some Javascript to remove the last column of the table.
When this happens FF and Chrome (untested in Opera) redraws the table with the right edge column of the right-most column as I would hope it would - with the right edge style of the table as it was before the column was removed - in this instance, a solid black border.
IE does not redraw the right border like this - it retains the internal column border, in this instance, a grey dashed cell border.
I was wondering if there was a way to make IE behave?

A demo is available at geostatsireland and it is a .com - the page name is mytable.html

Take a look <link removed... no longer valid>

If you have I.E. and Firefox available... notice the differences... Take a look at the source... I.E. appears to display this "more correctly"... it's certainly more visually appealling. I want the border to go all the way around the calendar in FF (it already does in I.E.), and in FF the first week is messed up (probably has something to do with no information within the divs, but why does it do that?

Bryan

<edit>I'd also like to fix the gap on the right side between the days and the calendar border, but just making it 15% for the last one doesn't work.</edit>

Code:

<style type="text/css">
<!--
div.wrapper {
   width: 400px;
   margin: 0 auto;
}
div.menu {
   color: blue;
   white-space: pre;
   text-align: right;
   font-size: 90%;
   margin: 200px 500px 200px 100px;
   }
div.submenu {
   color: blue;
   white-space: pre;
   margin: 150px 300px 500px -10px;
   font-size: 70%;
   line-height: 180%; 
}
body {
   background: white url("Images/background.jpg") no-repeat top scroll;
   text-align:justify;
     margin:200;
     padding:0;
}
body,td,th {
   font-family: Verdana, Geneva, sans-serif;
}
-->
</style></head>
<body>
<div class="wrapper">
<div class="menu"><span><button style="width:100;height:30" onClick="window.location='XXXXXXX.htm'">MASTER</button></span>  <span><button style="width:100;height:30" onClick="window.location='XXXXXXX.htm'">MASTER</button></span> <span><button style="width:200;height:30" onClick="window.location='XXXXXXX.htm'">MASTER</button></span> <span><button style="width:200;height:30" onClick="window.location='XXXXXXX.htm'">MASTER</button></span>  
<div class="submenu">
<span>  <button style="width:200;height:30" onClick="window.location='prva.htm'">title lef</button><br /></span>
<span><button style="width:200;height:30" onClick="window.location='XXXXXXX.htm'">title lef</button><br /></span>
<span><button style="width:200;height:30" onClick="window.location='prva.htm'">title lef</button><br /></span><br /></span>
<span>title lef<br /></span>
<span>title lef<br /></span>
</div>
</body>
</html> 

here is code. please save code with .html and open with browser.
Give me sugestions how to move links easily left or right [ write trick if know]
thank you in advance

loverbugs

Old story...looks good in IE but, different in FireFox:

link to page

My goal is to have all the footer infor appear below the content...not wrap up.

Any help would be greatly appreciated.

Thanks!

Hi Whenever I shrink my window in Ie, the Links bar stays in the same place. You can view this at

http://www.trowbridge-wiltshire.co.uk/newtrowbridge

Code:

	body 		{

			
			background:#CBDEF5;
			margin: 1em auto;
			width: 600px;
			
			
			}

	#leftcontent	{
			margin: 1em auto;
			position: absolute;
			top:100px;
			left:250px;
			width:100px;
			background:#CBDEF5;
			
			}

	#centercontent 	{
			margin: 1em auto;
			width:500px;
			background:#87B4EB;
			color:#ffffff;
			border:2px solid rgb(75,123,211);
   			margin-left: 140px;
   			margin-right:20px;
			}
	
	
	#advertising {
			margin: 1em auto;
			width:500px;
			background:#87B4EB;
			color:#ffffff;
			border:2px solid rgb(75,123,211);
			margin-left:140px;
			margin-right:20px;
		}
		
	#banner 	{
			background:#CBDEF5;
			height:40px;
			padding:5px;
			}
	

	p,h1,pre 	{
			margin:0px 10px 0px 10px;
			}

	h1 		{
			font-size:14px;
			padding-top:10px;
			}

	
	background: #c3c8c3; }
	
	#button ul {
			list-style: none;
			margin: 0;
			padding:0;
			border:;
			}
	
		#button li {
			border-bottom: 1px solid #CBDEF5;
			margin: 0;
			}
	
	
	#button li a {
			display: block;
			padding: 5px 5px 5px 0.5em;
			border: 1px solid #1958b7;
			background-color: #87B4EB;
			color: #fff;
			text-align:center;
			text-decoration: none;
			width: 100%;
			}
	
		html>body #button li a {
			width: auto;
			}
	
		#button li a:hover {
			border: 1px solid #1958b7;
			background-color: #4B7BD3;
			color: #fff;
		}
	
	
		

I developed http://technology-sleuth.com by testing in Firefox and Opera as I am on linux and at the time didn't have access to IE. All is fine in those browsers. However, in IE I see that when the page get too narrow, instead of narrowing the center div, it moves it below the rest of the page. As the center div is the one with the content, this is unacceptable. How can I prevent this?

This site as you see it now was 'shortened' so that the center div does not get pushed down in the 800*600 screen resolution. So you will need to make the browser window very narrow to see the effect. But the problem is still visible.

Thanks in advance.

Dotan Cohen

IE is at it once again.... it is doing VERY odd things....

On the following page, when you roll over the title/type/date and description sections for the related article, it changes backgrounds... this is done mostly with CSS and the smallest amount of javascript (only onmouseover/mouseout is used).

It works great elsewhere, but not in IE... any suggestions at what it may be??

THE LINK

I've attached a *.gif picture of how my site looks. It is completely coded in CSS. The footer just lies underneath the content, and I want to be able to move the footer to the bottom of the page. Below the sidebar.

Does anybody know how to do this?

Any help would be appreciated. Thank you!

So I am trying out using CSS instead of TABLES. I am also changing to XHTML, so I figured I'd do both since my site holds a very strict skeleton.

Here's my first question. Is this transformation proper, and are their other properties/values I should include to facilitate all browsers best

Quote:
<table border="0" width="770" cellspacing="0" cellpadding="0">
<tr>
<td width="770" height="5" bgcolor="#CCCCFF"></td>
</tr>
<tr>
<td width="770" align="center">test here</td>
</tr>
</table>



switched to CSS of this

Quote:
#footer_cell
{
width: 770px;
}

footer_bar
{
width:70px;
height:5px;
background:#CCCCFF
}

footer_copyright
{
width:770px:
text-align:center;



and the code as

Quote:
<div class="footer_cell">
<div class="footer_bar"></div>
<div class="footer_copyright">copyright me</div>
</div>



Ok, let me know what I missed or messed up. Thanks.

I am trying to make a make my most popular table here http://www.pearl.ru/isdunyasi/defaultinner.asp?Section=4 look like http://www.pearl.ru/isdunyasi/newtable.gif. With the codes beow everything is fine expect the headline area. I need to move headline background 10px left to make it right.

Code:

#innersubcontent {
	float:right;
	width:300px;
	height:450px;
	background:#d7d7d7;
}
#innersubcontentpopular {
	float:left;
	width:280px;
	margin: 0px 10px 0px 10px;
	height:100px;
}
#innersubcontentpopular	.top {
	width:290px;
	height:28px;
	margin: 0px -10px 0px 0px;
	background:#FFFFFF url(images/sidebarcontent_top.gif) no-repeat;
}
#innersubcontentpopular	.middle {
	width:280px;
	height:100px;
	background:#FFFFFF url(images/sidebarcontent_middle.gif) repeat-y;
}
#innersubcontentpopular	.bottom {
	width:280px;
	height:8px;
	background:#FFFFFF url(images/sidebarcontent_bottom.gif) no-repeat;
}
#innersubcontentpopular h1{
	padding:0px;
	margin-bottom:5px;
	font-size:14px;
	font-weight:bold;
	color:#aaaaaa;
}
#innersubcontentpopular h2 {
	padding:5px 2px 5px 2px;
	font-size:12px;
	font-weight:bold;
	color:#aaaaaa;
}
#innersubcontentpopular p {
	padding:2px; 
	margin:0; 
	font-size:12px;
}

Hi. This is template I copied just for fun in joomla http://www.worldoffashion.info/test/. I wonder how to move text from border as you can see in gray boxes text is near border. I tried padding but then it makes whole box larger

Hey All,

Firstly, I apologise if this has already been answered. The search feature wasn't working for me, and to be frank, I didn't know what to search either!

Secondly, I'm developing a site with Joomla and am implementing my own design. I'm a bit of a CSS newbie, well un-experienced at least, and fail at being able to pick cross-browser bugs. Thus I have turned to the masters for help!

Ok - So this is what it should look like: BrowserShots in IE8

And this is what it shouldn't look like: BrowserShots in IE7

What it appears to be doing, to me, is pushing the logo div to the next line, as the pillmenu div is floated to the left. In the process of doing this, it stuffs up the margins and pushes the whole layout out.

On a second level, it appears to me that the background image is off centred, which COULD be BrowserShots being funny, but I'm not sure?

Live site is at: techmonkeys.com.au

I would love it if anybody could help me identify what bugs are occuring here. Or if it's just an error on my behalf, which it sure could be!

I also highly appreciate any advice, tips, or criticism you want to provide. But not about my menu! That's not done :P

Thanks in advance.

Cheers,
Chris