|
CSS - Content Shifts In To Place
i have a site that if the page isn't cached, some of the content starts like, at the top of the page and then shifts in to it's positioned place. why does this happen? how can i stop it?
Similar TutorialsI'm having a few problems with my CSS design which I can't seem to solve right now, despite lots of searching and code editing. I'm trying to do a simple design with two columns - a left menu and the main content on the right. It should be a simple page I think. It's probably easier to see an example of the page I'm talking about: http://edwin.netbits.co.uk/devshed/...blem/index.html In Firefox, it looks fine. But in IE 6 the line "Some text" is slightly more to the right than the line "and some more text". If you select the text on the right, it's slightly more obvious (see screenshot). It seems that the menu on the left is somehow shifting the text over. I have looked at tutorials (such as this one), but the test page I put together has the same problem. I think this is probably a simple problem, but I can't work out what's wrong. The HTML and CSS code is shown below. HTML: Code: <div id="contentscontainer">
<div id="left">
Menu
</div>
<div id="contents">
Some text<br /><br />and some more text
</div>
</div>
CSS: Code: div#contentscontainer
{
padding: 0px;
margin: 0px;
}
div#left
{
float: left;
width: 50px;
padding: 0px;
margin: 0px;
}
div#contents
{
padding: 0px;
margin-left: 170px;
}
Thanks, Edwin Hi All, Hopefully I'm asking this in the right place-- this may be more of a CSS/HTML question. I currently have a DIV at the top of my webpage, with it's style as "none." [code] <div id='confirm' style="Display:none;"><p>Item Has Been Updated</p></div> Anyway, I have a little function that changes the display to "block" when an action occurs with database. Doing so, it display the DIV fine. However, it moves the "entire" page (meaning the rest of my DIVS) downward. This is kind of an eyesore when everything moves like that. Besides moving the DIV to the bottom of the page, how would I achieve displaying the DIV at the top without shifting the rest of the content downward? Thanks very much. Hey all, I have the following site: http://www.trshady.com All works fine but for SEO reasons along with my own desire to learn, I'm wanting to know how to change the code so that the layout stays the same, but the content of the page comes first in the code. So I have a 'topbar' div and a 'content' div. Without using absolute posistioning, how can I go about having the content div before the topbar div but still have it display the same as it currently does? Thanks for any help Hello all, I have validated my site in the w3c site. I am checking it on different browsers. For IE, my site appears the way i want it to but when i test on Firefox version 2.0. One of my divs shift upwards for some reason: Here is the CSS concerned: Code: #login{
width:180px;
background-color:#EBEBEB;
border-top-color:#8cacbb;
border-top-style:solid;
border-top-width:1px;
border-bottom-color:#8cacbb;
border-bottom-style:solid;
border-bottom-width:1px;
border-right-style:solid;
border-right-color:#8cacbb;
border-right-width:1px;
text-align:left;
text-transform:none;
line-height:20px;
color:Black;
padding:0px 0px 0px 0px;
margin:0;
list-style:none;
}
#login li{color:#436976;
margin-left:-28px;
/*display:list-item; */
list-style:none
}
#login li.head{margin-left:10px;
/*display:list-item; */
list-style:none
}
This div goes over another div. Not sure if this is relevant but the div it goes over uses php to require some text from another file. This is its CSS, the one that it goes over. Code: #header {
width: 950px;
height: 100px;
margin: 0; padding: 0;
font-size: 14px;
color: #FFF;
}
Actually, both divs have their contents from a php file. I use the require_once() function. As you can see i am more of a coder than a designer and i am struggling with the CSS! Can someone help me with this? The link as well as the box it is in shifts when I hover over the link. I have searched in this forum and Googled it, but still cannot figure it out. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>shift</title>
<style type="text/css">
#shift {
width:60%;
margin-left:2%;
padding:1%;
background-color:gray;
}
a:hover{
color: black;
background-color:#899B80;
}
</style>
</head>
<body>
<div id="shift">
<div>
<a href="#" rel="bookmark" title="title">When you hover over this link it shifts and the box it is in shifts as well.</a>
</div>
</div>
</body>
</html>
Hi, I am fairly new to CSS and learning but came across something. When I click on links to go to other parts of my site, the container on 2 pages only shifts a little. I even used the template I created for the index for the other pages and the CSS is the same. I notice this happening on Firefox. IE 6/7 the page looks fine. Any reason for this? Thanks Code:
#container{
margin-top: 0px;
margin-right:
auto;margin-bottom: 0px;
margin-left:
auto;width: 760px;background-color:#ffffff;
border: 1px solid #6785b3;
font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;
color: #666666;
height: 950px;
}
http://loganagency.com/temp/index.php Please click there and view in IE and then in Firefox. The div is completely shifted upward and the baber overlaps the text in FF but looks fine in IE. What is wrong and how can I avoid this in the future? While we are on the subject, what gives with IE vs FF web design? Everyone posts errors here. Is there a tutorial or post that describes the reasons they process code so differently and ways to prevent it? Can someone help me with this? The text shifts when you hover over the link. Why is this happening? I have searched the web for this one but still cannot figure it out. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>temp</title>
<style type="text/css" media="screen">
#test {
height: 1%;
background-color:gray;
width:40%;
padding:2%;
}
a:hover,
a:active {
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<div id="test">
Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.
</div>
</body>
</html>
Thanks I have this little menu on this site: http://kris.dreamhosters.com/mhw/ When I view it in IE6 it is shifted to the left several pixels. Upon hovering over it, it shifts to where it belongs. I've done some search both here and on google and just can't find an answer. Fortunately it doesn't seem to do this in IE7, but I still like my pages to work in IE6. Any insight greatly appreciated. I have been dealing with this issue for a while now and I don't know if I just can't see it or maybe I just don't know what I'm doing. In IE6, the div #primary is shifted almost off the screen to the left (or to the outside of the wrapper on the right), but on hover it shifts to the correct position. It works fine in FF2, FF3, safari 3.x and ie7. I have tried so many things it would be too much to list. I've read about all kinds of IE hacks and tried most of them (holly hack, inline hack, hasLayout, etc) that I thought pertained to the issue. Maybe I didn't use them properly, i don't know at this point. All of the code is a modified wordpress theme, sandbox, which i have customized for this particular layout. I have left a black box around the affected div for testing purposes. If you look on the homepage you will see the div stuck off the left of the page (or right, i haven't been able to figure out what causes it to choose a side), as i have removed the links again for testing purposes. It will only shift if there are links or something to invoke the hover. Once the div has been redrawn in IE6 and moved to its correct position, it seems to stay where it should on subsequent pages. I can provide the site for reference if needed. thanks for any help at this point. Code: <div id="container"> <div id="content-2"> <div id="post-25" class="hentry p1 page publish author-admin category-uncategorized untagged y2008 m11 d10 h16"> <h2 class="entry-title"></h2> <div class="entry-content"> <p>Life happens in the kitchen. That’s our belief, and we’re sticking to it.</p> <p>For the past 35 years, Cooks has been the Twin Cities’ industry leader in all things culinary. We were the first cooking school to bring nationally recognized chefs and cookbook writers to the Twin Cities, the first retail store to incorporate cooking classes and the first specialty gourmet store to directly import culinary products.</p> <p>And those won’t be our last firsts. We’re constantly growing, changing and challenging ourselves to bring the best products and experiences the food world has to offer to our customers.</p> </div> </div><!-- .post --> </div><!-- #content --> </div><!-- #container --> <div id="primary" class="sidebar"> <ul class="xoxo"> <li id="text-285739111" class="widget widget_text"> <div class="textwidget"><a href="/history" class="menuabout1"> </a> <a href="/passion" class="menuabout2"> </a> <a href="/community" class="menuabout3"> </a> <a href="/stuff" class="menuabout4"> </a> <a href="/employment" class="menuabout5"> </a> <a href="/donations" class="menuabout6"> </a></div> </li> </ul> </div><!-- #primary .sidebar --> <div id="secondary" class="sidebar"> <ul class="xoxo"> <li id="text-273708591" class="widget widget_text"> <div class="textwidget"><ul id="aboutpanel"> <li id="aboutbut1"><a href="/history"></a></li> <li id="aboutbut2"><a href="/community"></a></li> </ul> <ul id="aboutpanelb"> <li id="aboutbut3"><a href="/passion"></a></li> <li id="aboutbut4"><a href="/stuff"></a></li> <ul></div> </li> </ul> </div><!-- #secondary .sidebar --> here is the CSS, i use a separate ie6 css file, i have combined all CSS for easy viewing. Code:
div#wrapper {
width: 914px;
margin: 12px auto 20px auto;
padding: 0px;
}
* html div#primary {
position:relative;
}
/* CONTENT AND WIDGETS FORMATTING */
div#container {
float:left;
width:914px;
}
div#content { /* homepage template USED BY HOME PAGE*/
height:1%;
margin-top: -18px;
margin-right: 40px;
margin-bottom: 0;
margin-left: 200px;
}
div#content-2 { /* secondary template USED BY ABOUT PAGE */
height:1%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #333333;
margin-top: 20px;
margin-right: 380px;
margin-bottom: 0;
margin-left: 260px;
}
div#content-3 { /* tertiary template */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #333333;
margin-top: 0;
margin-right: 200px;
margin-bottom: 0;
margin-left: 200px;
}
div.sidebar {
float:left;
overflow:hidden;
}
div#primary {
width:200px;
margin-top: 18px;
margin-right: 0;
margin-bottom: 0;
margin-left: -98%;
}
div#secondary {
width:315px;
margin-top: 8px;
margin-right: 0;
margin-bottom: 0;
margin-left: -370px;
}
div.sidebar li {
list-style:none;
margin:0 0 2em;
}
div.sidebar li form {
margin:0.2em 0 0;
padding:0;
}
div.sidebar ul ul {
margin:0 0 0 1em;
}
div.sidebar ul ul li {
list-style:none;
margin:0;
}
div.sidebar ul ul ul {
margin:0 0 0 0.5em;
}
div.sidebar ul ul ul li {
list-style:none;
}
div.sidebar div, div.sidebar ul {
margin:0;
padding:0;
}
I'm not sure if this is an HTML problem or a CSS problem, but since it seems to be a display issue, I'll start here. I have an annoying minor display issue on my site , the solution to which has alluded me for some time. The pop up menues are created using CSS specificity but I'm thinking that has no bearing on the issue because the menues aren't the only place the problem occurs. In a number of places, I have implemented mouseover effects using the :hover pseudo-(class/element). In instances where the hovered content requires more screen space (to add a border or text decoration, etc) the whole page gets shifted a pixel or two (however much it takes to add the effect). I've tried adding transparent borders around the static images and increasing line height around text, but to no avail. Any suggestions? i have a div tag absolutely positioned and inside that tag i ONLY have an image. so if place it in some code like this: Code: <tr><td><div id="thetag"><img src="asdf.gif" width="10" height="20"></div></td></tr> and following that right away, if i have another table row with whatever in it: Code: <tr><td>asdf</td></tr> then what happens is that second row gets shifted up and gets put in place under the first row, making the image overlap the 'asdf'. if i put at least one char after the image in the div, its fine and the second row will follow under the image on a new line like it should, but i dont want any text in there. any ideas? thanks Of course, IE is being a P.I.T.A. I can't figure out why this is happening... but it's probably something so simple I'm overlooking it. I have a set of images and/or links set up as a list and the last item on the first row shifts down. After that row, everything looks fine. No problems on FF, Chrome and Safari (Mac). See this page for example and view with Explorer: www[dot]cameronstevens[dot]ca/gallery[dot]html Thanks Hi, after having the problem with the div's in IE I got a new problem. I got a clock placed in my sidebar and under it there is some text. In FF it's placed right but in IE not again :S How can I fix this? Link: www.windmolentechnologie.tk Code: index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Windmolentechnologie</TITLE>
<LINK HREF="http://windmolentechnologie.webs.com/css/default.css" REL="stylesheet" TYPE="text/css" />
<style type="text/css">
.hiddenPic {display:none;}
</style>
<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript" src="http://windmolentechnologie.webs.com/js/nav1.js"></script>
<script type="text/javascript" src="http://windmolentechnologie.webs.com/js/klok.js"></script>
<script src="http://static.freewebs.getclicky.com/44044479.js" type="text/javascript"></script><noscript><img alt="Clicky" src="http://in.freewebs.getclicky.com/44044479-fwdb4.gif" /></noscript>
</HEAD>
<BODY>
<div id="container">
<div id="nav">
<img src="http://windmolentechnologie.webs.com/images/Nav2.png" USEMAP="#nav" border="0" name="nav1">
<map name="nav">
<area shape="rect" coords="261,40,339,120" href="home.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt1')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="341,40,419,120" href="inhoud.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt2')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="421,40,499,120" href="logboek.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt3')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="501,40,579,120" href="profielen.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt4')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="581,40,659,120" href="bedrijven.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt5')" onMouseOut="imageChange('nav1','alt0')" />
</map>
</div>
<div id="banner">
</div>
<div id="content">
<div id="new">
<table id="klok">
<td id="kloktd">
<img src="dg8.gif" name="hr1"><img
src="dg8.gif" name="hr2"><img
src="dgc.gif" name="c"><img
src="dg8.gif" name="mn1"><img
src="dg8.gif" name="mn2"><img
src="dgc.gif" name="c"><img
src="dg8.gif" name="se1"><img
src="dg8.gif" name="se2">
</td></table>
<p id="new1">Dit is een testlijntje</p>
<p id="new2">lolololol</p>
<p id="new2">what happens if this line is a little bit too long for the box?</p>
<p id="new3">fredje pietje ludo</p>
</div>
<div id="inhoud">
<iframe name="iframeinhoud" src="home.html" frameborder="0" height="500" width="540" scrolling="no" allowtransparency="true"></iframe>
</div>
</div>
<div id="footer">
</div>
</div>
<img src="http://windmolentechnologie.webs.com/images/InhoudHome.png" alt="InhoudHome" title="InhoudHome" height="500" width="540" class="hiddenPic">
<img src="http://windmolentechnologie.webs.com/images/InhoudLog.png" alt="InhoudLog" title="InhoudLog" height="500" width="540" class="hiddenPic">
</BODY>
</HTML>
Code: css (will make this shorter later)
html {
margin:0;
padding:0;
height: 100%;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
body {
background-color: #f2f3ed;
margin: 0px;
padding: 0px;
height: 100%;
z-index:0;
position:relative;
text-align: center;
}
#container {
position:relative;
height:auto !important;
min-height:100%;
width: 760px;
margin:0 auto;
}
#nav {
width:100%;
height:160px;
background: url(../images/Nav.png) no-repeat;
}
#banner {
width:100%;
height:101px;
background: url(../images/Banner.png) no-repeat;
}
#content {
width:100%;
height:500px;
background:transparent;
}
#new {
background: #e6e8dc url(../images/New.png) no-repeat;
width:220px;
height:500px;
float:left;
text-align: left;
}
#inhoudhome {
background: #e6e8dc url(../images/InhoudHome.png) no-repeat;
width:540px;
height:500px;
float:left;
text-align: left;
}
#inhoudlog {
background: #e6e8dc url(../images/InhoudLog.png) no-repeat;
width:540px;
height:500px;
float:left;
text-align: left;
}
#inhoudprof {
background: #e6e8dc url(../images/InhoudProf.png) no-repeat;
width:540px;
height:500px;
float:left;
text-align: left;
}
#footer {
background: url(../images/Footer.png) no-repeat;
height:50px;
width:100%;
position:relative;
}
p#inhoud1 {
margin:35px 5px 0px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#inhoud2 {
margin:0px 5px 0px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#inhoud3 {
margin:0px 5px 10px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#new1 {
margin:35px 5px 0px 25px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#new2 {
margin:0px 5px 0px 25px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#new3 {
margin:0px 5px 10px 25px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
table.tabellog {
border-collapse: collapse;
margin:37px 25px 10px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
table.tableprof1 {
border-collapse: collapse;
margin:37px 25px 5px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
table.tableprof2 {
border-collapse: collapse;
margin:5px 25px 5px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
table.tableprof3 {
border-collapse: collapse;
margin:5px 25px 10px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
td {
padding:5px;
border-width: 1px;
border-style: solid;
}
td.datlog {
text-align:center;
font-weight:bold;
width:90px;
}
td.omschlog {
font-weight:bold;
}
td.tijdlog2, td.datlog2 {
text-align:center;
}
td.tijdlog {
text-align:center;
width:100px;
font-weight:bold;
}
td.kol1 {
font-weight:bold;
width:125px;
}
td.kol1foto {
width:100px;
height:125px;
}
table {
border-color:#000;
}
table#klok {
margin:64px 5px 0px 57px;
border-width:0px;
}
td#kloktd {
height:45px;
border-width:0px;
}
Is it possible to use CSS to place one image over the top of the other? For what I mean go he celticblues dot com/test/test.html I could do the same thing via photoshop, but I want to do it with CSS as I have several to do and I am not sure of the relative sizes yet and don't want to keep redoing the photoshop thing. Ed Hi! I've got a problem thats driving me mad. i got two divs inside my Content-div. The Text-div and the Box-div at the moment they are arranged like this: data.fuskbugg.se/dipdip/thisishowitis.jpg In the Box-div i've inserted two pictures that i want vertical aligned and the Box-div should be to the right i want it to look like this data.fuskbugg.se/dipdip/howitshouldbe.jpg with the Text-div and the Box-div next to each other. NOT on top of each other PLEASE help me out / Dippah Hi Everyone, I've been trying for weeks now to get my footer to sit at the bottom of my screen. I've read all of the how-to articles regarding footers and tried what seems like everything! After some investigation with Firebug I've determined that my problem seems to be some of my "wrapper" divs. My container and pagewrapper divs should be encompassing everything on the screen but they are not. If you wouldn't mind taking a look for me, I would REALLY appreciate it. Right now I have the grey footer just chillin' in the middle of the page as you can see. www.RoundtopRiders.com/v2/ THANK YOU!!! Jason Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. Hi I would like to know where should I go to get an easy, small script so that I can use multi-level drop down menus in my website? I googled and came up with a supposed menu framework.. it looked easy but when I tried it, it didnt work.. |
|||||||