|
CSS - Ie Moving Divs
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 Similar TutorialsHi - I have been using xhtml coding for most of my web projects this year, thankfully they have been pretty simple. I have a new one, the client has requested it be xhtml compliant. I was not consulted during the design phase, so i have been give the task of programming a very table centric layout. Can all designs be rendered with div's instead of tables? I have a diagram of the structure of a template page and I am not sure how to go about tackling it. Do i start with each individual section? I just need a little push and confimation the below layout is doable in css/divs... Thanks Hi all, So i have been trying to get the divs with the content in to sit properly on IE6 they work correctly in firefox and ie 7 and 8. Originally the text div and the news bar div were both moved far down the page. I removed the height setting on the text div and it moved it back into (about) the correct place. But I cant figure out what is causing the news div to move, any advice would be greatly appreciated Code:
<body>
<div id="main" style="position:absolute; width:850px; background-image:url(images/4560-background_midext_02.jpg); left:15%; z-index:1;">
<div id="topborder"><img src="images/4560-bkground_top.jpg" /></div>
<?php include('components/Header.php'); ?>
<div id="body" style="position:relative; left:10px; top:10px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<?php include('components/logodisplay.php'); ?>
******THIS DIV IS THE ONE WHICH IS MOVING******
<div id="newsbanner" style="position:relative; left:10px; top:7px; z-index:1; display:block;">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','560','height','60','title', 'newsbanner','src','flash/news','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/news' ); //end AC code
</script>
<noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="560" height="60" title="newsbanner">
<param name="movie" value="flash/news.swf" />
<param name="quality" value="high" />
<embed src="flash/news.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="560" height="60"></embed>
</object></noscript>
</div>
<div id="sponsorshipenquiries" style="position:relative; left:20px; top:20px; z-index:1; <?php echo $enquiry; ?> " >
<img src="images/header_sponsorship.jpg" />
<div id="text" style="top:10px; width:533px;">
Sponsorship provides a prime opportunity for your company to enhance its visibility and corporate presence during the conference. In addition to the intrinsic benefits of each option, all sponsorships include the opportunity to present a paper, full recognition on all promotional materials as an official sponsor and complimentary delegate places. All sponsorships are sold on a first come first served basis. Options can be reserved for a period of 10 working days.<br /><br />
<img src="images/header_sponsorshipoptions.jpg" />
<br /><br />
<img src="images/gr_platinum.jpg" />
<br /><br />
<img src="images/gr_gold.jpg" />
<br /><br />
<img src="images/gr_silver.jpg" />
<br /><br />
<img src="images/gr_bronze.jpg" />
<span style="left:29px; top:2px;"><p> For more information on becoming a sponsor of the conference please contact</p>
<p>Matthew Moss<br />
Conference director<br />
Tel: +[44] (0)20 7625 0000<br />
E-mail:mm@summittradeevents.com</p></span>
</div>
<div id="movedatfooter" style="position:relative; right:30px; top:170px;"><?php include('components/Footer.php'); ?></div>
<div id="borderbottom" style="position:relative; top:170px; right:30px;"><img src="images/4560-bkground_bottom.jpg" /></div>
</div>
<div id="sponsorshiplistings" style="position:relative; left:20px; top:20px; z-index:1;
<?php echo $listing; ?>" >
<img src="images/header_sponsorship.jpg" />
<div id="text" style="top:10px; width:533px;">
Sponsorship provides a prime opportunity for your company to enhance its visibility and corporate presence during the conference. In addition to the intrinsic benefits of each option, all sponsorships include the opportunity to present a paper, full recognition on all promotional materials as an official sponsor and complimentary delegate places. All sponsorships are sold on a first come first served basis. Options can be reserved for a period of 10 working days.
<p> For more information on becoming a sponsor of the conference please contact</p>
<p>Matthew Moss<br />
Conference director<br />
Tel: +[44] (0)20 7625 0000<br />
E-mail:mm@summittradeevents.com<br />
<br />
We would like to take this opportunity to thank the sponsors of TurkmenTel 2009 for their continued support.
<br />
<br />
<img src="images/gr_platinumsponsor.jpg" />
<br />
<br />
<?php
$type = "platinum";
include('components/logoviewer.php');
?>
<img src="images/gr_goldsponsor.jpg" />
<br />
<br />
<?php
$type = "gold";
include('components/logoviewer.php');
?>
<img src="images/gr_silversponsors.jpg" />
<br />
<br />
<?php
$type = "silver";
include('components/logoviewer.php');
?>
<img src="images/gr-bronzesponsors.jpg" />
<br />
<br />
<?php
$type = "bronze";
include('components/logoviewer.php');
?> </p>
</div>
<div id="movedatfooter" style="position:relative; right:30px; top:15px;"><?php include('components/Footer.php'); ?></div>
<div id="borderbottom" style="position:relative; top:4px; right:30px;"><img src="images/4560-bkground_bottom.jpg" /></div>
</div></div>
</div>
</body>
</html>
I have no idea what the problem is here, ive tried fiddling with some of the positioning properties and nothing seems to have any effect. So any help is greatly appreciated Hi, Is there any app or way to resize or change the position of the divs just dragging and dropping? Something like in Inkscape for resizing or moving objects. Ciao Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. 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 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;
}
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! 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;
}
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 Hi, Hoping someone has had this same issue before.... I have a simple page separated with two images mainly. The main image that sets the initial design is the background image and then a footer image. To allow the page to be fluid I have set a content div to sit between the two and expand the color of the page to create the illusion of one flowing design. Nothing too strange there... In fire fox the design looks great however in IE7 it looks as though the content div has been shifted by 1-3px to the left... Please see these two screen shots... Fire Fox: (members.cox.net/~jeaddy/FF_ok.jpg) IE7: (members.cox.net/~jeaddy/IE7_broke.jpg) I have tried using a display:inline; within the content div and it fixes the issue but it causes the min-height setting to be ignored and actually messes up a few other things as well. I have linked a copy of the pages generated html (members.cox.net/~jeaddy/html.txt) and the css file (members.cox.net/~jeaddy/default.css). I apologize for how long it is. If anyone has ideas/suggestions i'm open to anything as this one little issue is about to drive me Note: My account is new otherwise I would have made the url's clickable... Forum rules 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 hi i go problem the pictures keeps moving towards right is there way to fix these? the movie pictures so they stay all on left side forever. My problem is getting very frustrating been trying to fix it for ages, and its probably something simple but if i dont fix it soon my laptops going to find a river very quickly. I have a site using CSS(duh!) and when i highlight over a link on the site some of my text moves around. then when i highlight over my javascript drop down menu it moves back. its very strange. heres the link to one of the worse pages for jumping. http://zephyr-wgtn.co.nz/newsite/eventS.aspx Any help much appreciated. Regards Dan 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 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! Hi I recently moved a site "http://www.nikkilamann.com/index.php" and after moving it the CSS is all messed up (style.css) The scroll frame box is not centred anymore and the scrollbar is supposed to be white in colour and there is some funny box next to "fashion" on navigation. Site is totally messed up after move. Does anybody know what could cause this? 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. |
|||||||