|
CSS - Ie6/7 Moving Div's And Background Off Center
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 Similar TutorialsI have a form that has background images for the inputs. In both IE 6 and IE 7, the background images will move if the text goes outside of the image. You can see what I'm talking about here. Here is the xhtml: Code: <div class="contact">
<form action="sendmail.php" method="post" id="contactform">
<ul>
<li>
<label for="name"><img class="label" src="images/name.png" alt="" /></label>
<input class="inputbox" type="text" name="name" value="" id="name" />
</li>
<li>
<label for="email"><img class="label" src="images/email.png" alt="" /></label>
<input class="inputbox" type="text" name="email" value="" id="email" />
</li>
<li>
<label for="tele"><img class="label" src="images/phone.png" alt="" /></label>
<input class="inputbox" type="text" name="tele" value="" id="tele" />
</li>
<li class="special">
<label for="last">Don't fill this in:</label>
<input type="text" name="last" value="" id="last" />
</li>
<li>
<label for="message"><img class="label" src="images/message.png" alt="" /></label>
<textarea rows="5" cols="30" name="message" class="messagebox"></textarea>
</li>
<li class="submitbutton">
<input type="submit" value="" class="formbutton" />
</li>
</ul>
</form>
</div>
and here is the relevant css: Code: .inputbox {
height: 39px;
width: 246px;
border: none;
padding: 10px 10px 0 10px;
background: url("../images/inputbox.png") no-repeat 0 0;
font: bold italic 1.25em/1.1em Lucida, sans;
color: #3d2d06;
}
I'm sure this is an easy one but I can't really figure it out and googling has not produced any results. Thanks in advance. I'm working with a php script that i purchased. In my admin_login.php page is the entry for the image and my entry from my layout.css page. I'm only seeing half my background image. I cant seem to get it centered. admin_login.php... 5.<div id="container_login"> 6. <a href="http://www.myglobalpnr.com" target="_blank" id="login_logo"><img src="<?php echo IMG_PATH; ?>login_logo.jpg" alt="Property Listing Script by ClassifiedsGeek.com" /></a> 7. <div id="main_login"> 8. <?php require $content_tpl; ?> 9. </div> <!-- main_login --> 10. </div> <!-- container_login --> 11. 12.layout.css... 13. 14./* login */ 15.#container_login{ 16. font-family: Arial, sans-serif; 17. font-size: 12px; 18. margin: 0 auto; 19. overflow: hidden; 20. position: relative; 21. max-width: 100%; 22. height: 1306px; 23.} 24.a#login_logo{ 25. position: absolute; 26. top: 0; 27. left: 404px; 28. height: 129px; 29. margin: 0 auto; 30. width: 192px; 31.} 32.#container_login #main_login{ 33. float: none; 34. margin: 200px auto 0; 35. position: relative; 36. text-align: left; 37. width: 343px; 38.} 39.#container_login h3{ 40. font-size: 1.3em; 41. font-weight: bold; 42. margin: 5px 15px; 43. text-transform: uppercase; I know there's one thing that i didn't do. Can you help me please? Thanks in advance, Scotty13 So I have a page where the content itself will be an 800px wide light column down the center of the page. But the background (to the left and right of the column) I want to be a gradient lightblue. I would usually accomplish this by making the background color lightblue and simply attaching the gradient to the top using CSS. Then I would create a table for the center column and make it the light background color. The problem is that on short pages, I want the center column to extend all the way to the bottom of the page, irregardless of the content. Unfortunately, height="100%" or it's CSS variants don't work for tables, cells, or even DIVS so I can't force the table to extend down to the bottom of the page. The only way it seems I could do this, then, is by using the body background image attribute or body background CSS to make the column color the background for the entire center of the document, but those attributes are already both used up creating the gradient. Any thoughts on how I might go about this. A sample of what I'm getting at is at http://www.poweredpages.com/fdr/index2.php. There, you can see the background gradient and the column that should extend to the bottom, even if there's very little text. Thanks, Jeremy I have a problem with my background image. I need to centre the background image and center the container div on top of that. I have used the below CSS which has the desired effect in Mozilla but for some reason in ie, the background moves depending on browser size when it needs to stay put! Any ideas? body { font-size: 0.70em; font-family: Arial, Helvetica, sans-serif; text-align: center; background:#ffffff url('../images/content_bg.gif') top center no-repeat; color: #303030; height:100%; min-height:100%; } #container { width: 900px; text-align:left; position: absolute; margin-left:-450px; left:50%; z-index: 100; } I am trying to build this re-sizable box for an iPod Touch application. mo-de . net/d/bg.jpg #content_container_top {width:50%; height:13px; padding: 0px; position: relative;} #content_container_top_left {width:13px; height:13px; padding: 0px; top: 0px; left: 0px; position: absolute; background-image: url(../images/content_container_a/tl.png); background-repeat: no-repeat;} #content_container_top_repeat {width:100%; height:13px; padding: 0px; top: 0px; left: 13px; position: absolute; background-image: url(../images/content_container_a/ttrepeat.png); background-repeat: repeat-x;} <div id="content_container_top"><!--Start top with three columns --> <!-- Top columns 1 --> <div id="content_container_top_left"> </div> <!-- Top columns 2 --> <div id="content_container_top_repeat"> </div> <!-- Top columns 3 --> <div id="content_container_top_right"> </div> </div><!--End top with three columns → This is a rough version of what I was thinking. In the old days I could do this easily with tables but I am trying to do this with divs. My question is how can I create three columns the center has a tiled background that resizes. How do I make the center duplicate its self and not over ride the right side? I know how to make fixed size three column layouts but not sure how to make dynamic re-sizable three columns. hey, i have 2 CSS problems. number 1: my main <div> is not centered in IE. it's fine in FF, mozilla, and opera, but it stays all the way to the left in IE. Code: #main { width: 77%; margin: 0 auto; border: 1px solid #999; overflow: auto; background: #970303; color: #FFF; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 20px; -moz-border-radius-bottomright: 20px; }
Code: <div id='main' align='center'> number 2: i can't figure out this gradient background stuff. i have an image, 1 px wide and 1000 px high. it works fine, but once theres enough information on a page, and its longer than the 1000px, the image starts over and looks extremely unprofessional. how can i make so that the one gradient image is stretched out for the length of the page? thanks. I am using the following code how do I change it so that it would show up in the center of the brower window? Thanks Tim PHP Code: <div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\"> <object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0 ,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\"> <param name=\"allowScriptAccess\" value=\"sameDomain\" /> <param name=\"movie\" value=\"ads/cardio3.swf\" /> <param name=\"loop\" value=\"false\" /> <param name=\"quality\" value=\"high\" /> <param name=\"wmode\" value=\"transparent\" /> <param name=\"bgcolor\" value=\"#ffffff\" /> <embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\" bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" /> </object> </div> 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! 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 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;
}
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 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 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;
}
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 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? I have a css menu navigation that I'm having problems with. I don't know why the menu bar is being pushed about 40px to the left. I want it to go further left. The total size of the menu bar is 960px. Please help me out... Thanks, Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Easy Living by Lisa Marie- Professional Organization and Design</title> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="content"> <div id="header"> <img src="images/logo.jpg" alt="easy living by lisa marie- organizing your life so you can enjoy it" width="554" height="197" /> <ul id="nav"> <li id="home"><a href="index.html">Home</a></li> <li id="lisa"><a href="about.html">About Lisa Marie</a></li> <li id="services"><a href="services.html">Services</a></li> <li id="benefits"><a href="benefits.html">Benefits</a></li> <li id="testimonials"><a href="testimonials.html">Testimonials</a></li> <li id="contact"><a href="contact.php">Contact</a></li> </ul><!--end of nav--> </div><!--end of header--> <div id="slideshow"> <img src="images/slide1.jpg" alt="" class="active" /> <img src="images/slide2.jpg" alt="" /> <img src="images/slide3.jpg" alt="" /> <img src="images/slide4.jpg" alt="" /> <img src="images/slide5.jpg" alt="" /> <img src="images/slide6.jpg" alt="" /> </div><!--end of slideshow--> </div><!--end of content--> </div><!--end of wrapper--> </body> </html> Here is the CSS styling... Code: body {
background-image: url(../images/background.jpg);
margin: auto;
}
#wrapper {
width: 1054px;
background-color: #ffffff;
color: #000000;
border: 1px white;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 30px;
padding-bottom: 20px;
}
h1 {
font-family:"Apple Chancery", Serif;
font-weight: normal;
font-size: 32px;
text-align: left;
color: #60b6d7;
}
h2 {
font-family:"Apple Chancery", Serif;
font-weight: normal;
font-size: 26px;
text-align: center;
color: white;
}
h3 {
font-family:"Apple Chancery", Serif;
font-weight: normal;
font-size: 28px;
text-align: left;
color: #60b6d7;
}
h4 {
font-family:"Apple Chancery", Serif;
font-weight: normal;
font-size: 20px;
text-align: left;
color: #000000;
}
#header {
text-align: center;
}
#nav {
height: 50px;
width: 960px;
background-color: #60b6d7;
margin: auto;
list-style: none;
display: block;
overflow: hidden;
}
#nav li {
margin-top: 10px;
float: left;
width: 160px;
}
#nav li a:link {
color: white;
font-family: "Apple Chancery", Serif;
font-size: 25px;
text-decoration: none;
height: 50px;
}
#nav li a:hover {
color: black;
font-family: "Apple Chancery", Serif;
font-size: 25px;
text-decoration: none;
height: 50px;
}
#nav li a:visited {
color: black;
font-family: "Apple Chancery", Serif;
font-size: 25px;
height: 50px;
}
Hi! I just floated left my navigation menu, and it caused my page title and breadcrumbs to move over to the immediate right of that (because it is also floated left)... Wondering if anyone could tell me the proper way of getting it back to the left side as it was before. Thanks. Drew EDIT: Here's the link, whoops! http://drewclifton.com/healthwise/?page_id=1667 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 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. |
|||||||