|
CSS - Changing Css Display Shifts Content Down
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. Similar Tutorialsi 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? I'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 I'm revamping my personal webpage. (What I've done so far is at http://homepage.mac.com/johntstuart/mockup/ ) I've been told there is a way for JavaScript to replace the content of a DIV, when the user selects from the navigation. Can anyone point me in the direction of this JavaScript? And any tutorials? I'm trying to get my show/hide script working in Opera 6 and having no luck. So I know I can set CSS properties with JavaScript in Opera 6 (I'm testing on Mac) as I've managed to make it work with the visibility property. However doing: Code: document.getElementById(el).style.display = 'block'; does nothing... if I do an alert on the display setting of the element it always says undefined. I've also tried doing a className switch, but doing this : Code: <div id="el" class="hidden">...</div> alert(document.getElementById(el).className); Also gives me a 'undefined' message. Opera 6 is the only thing that's playing up on me at the moment so any help would be greatly appreciated. -D Hi there, I have a script that displays content when a link is hovered on which then hides when the mouse is hovered off it. Is there a way to make it so the content stays there until one of the other links is hovered on? This is my CSS: PHP Code: div#links a span {display: none;} div#links a:hover span {display: block; position: absolute; top: 200px; left: 0; width: 125px; padding: 5px; margin: 10px; z-index: 100; color: #AAA; background: black; font: 10px Verdana, sans-serif; text-align: center;} div#links a:hover {color: #411; background: #AAA; border-right: 5px double white; } and this is the HTMl PHP Code: <div id="links"> <a href="http://www.meyerweb.com/eric/css/">Link 1<span>1</span></a> <a href="http://www.meyerweb.com/eric/css/">Link 2<span>2</span></a> <a href="http://www.meyerweb.com/eric/css/">Link 3<span>3</span></a> </div> Any ideas? 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>
i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help Hi Could someone tell me why the content is not showing in Netscape 7 please This is the site http://www.hardingscatering.co.uk/06/index.htm I have put an overflow property on the container div, so FF can show white as the bground colour. But when viewed in Netscape the content is not there and on other pages a scroll bar appears. I always have trouble with this, and would really like to know what I am doing wrong. Thanks for any help. 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 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. 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 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;
}
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;
}
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 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. Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code:
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code:
#contentBlock {
position: absolute;
top: 130px;
left: 200px;
height: 101%; /* Hack to force vertical scroll bars */
right: 280px;
min-width: 400px;
visibility: visible;
display: block;
}
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
.disclosureCollapsed {
background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
display: block;
text-align: right;
/*position: absolute;*/
float: left;
top: 0px;
left: 0px;
width: 18px;
height: 20px;
}
.disclosureCollapsed:hover {
cursor: pointer;
}
How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken |
|||||||