|
CSS - Firefox Shifts The Div Tag Completely
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? Similar TutorialsHello 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! 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;
}
Hi all, I use an background image for a menu. Code:
#menu a, #menu a:hover {
height: 20px;
width: 150px;
text-decoration: none;
padding-left: 40px;
padding-top: 3px;
padding-right: 3px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-bottom: 10px;
background-position: 0px;
vertical-align: middle;
}
#menu a {
color: #9E007F;
background-image: url(../imgs/nav/subNav/subNav_bg.gif);
background-repeat: no-repeat;
}
#menu a:hover {
color: #FFF;
background-image: url(../imgs/nav/subNav/subNav_bg_over.gif);
background-repeat: no-repeat;
}
It works fine in IE but not in firefox. Somehow the background image is not completely shown. It stops after the last letter. Any suggestions?? Grtz, 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'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? 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 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 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;
}
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 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 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. 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 http://energetic.bluekazoo.eu/ Hi all. Hope someone can help. The above site has a strange quirk with there being a 20px gap to the right of the image which try as I might, I cannot seem to resolve. Been looking at it so long now that I reckon I can't see the wood for the trees. All help would be gratefully appreciated. Mark. Well I trying to build a navbar and I want it to be completely in CSS so I can have it in my styling sheet and only have to edit it once when I add a new page to the navbar. I have it figured out so the formatting for it is in the CSS but the actual items and links to pages are in the HTML, and I want the format and items in the CSS. Here's my CSS for the navbar formatting: Code:
#navbar ul {
margin: 10px auto auto auto;
padding: 6px;
list-style-type: none;
text-align: left;
background-color: #000;
font-family: arial;
}
#navbar ul li {
display: inline;
font-family: arial;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #ffffff;
background-color: #000000;
font-family: arial;
}
#navbar ul li a:hover {
color: #000000;
background-color: #ffffff;
font-family: arial;
}
And here's the code I have in the body of my HTML that adds each of the items to the navbar: Code: <div id="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="irc.html">IRC</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> Anyone have any ideas on how I would do this? Thanks. Please look at this page in Firefox: http://www.pacunionsonoma.com/real-estate-listings.asp?city=Santa-Rosa Notice the links up to the top area that read Showing Appointment, Listing Images, etc. No matter what I do I can't get them to appear within the respective property listing div. It must be some inheritance issue but I just can't figure it out. Thanks. I'm completely stuck with my current web design. Pretty sure I'm not doing this the most efficient way, so any suggestions are helpful. My intention is to have the following: 1) an overall pg wrapper that sets width and centering 2) header 3) nav/links area 4) main content 5) footer My probs are all over the place. First, I have wrapper divs that aren't showing up. The content that is supposed to be inside these divs doesn't appear to be in them, so I guess the divs are empty. But I have no idea why this is happening. There is supposed to be a blue bg behind my links section. It's not showing up in IE6. The #main div --which should be a wrapper that contains all the thumbnails of the page -- is empty and showing up mid-way down the page behind all the thumbnails in IE6. If someone can start with these issues and help me, I would be forever grateful! XHTML is attached in a txt file and CSS is posted below. (I added the obnoxious bg colors & borders to divs intentionally to see where things are showing up.) Code: * {margin:0;padding:0}
#wrapper {
border: #f09 dashed 3px;
background-color: yellow;
text-align: left;
margin: 50px auto;
padding: 0;
width: 810px;
}
#header {
border: blue dashed 1px;
background-color: pink;
padding: 0px;
margin: 5px;
}
#header p {
display: inline;
}
#intro {
border: 1px solid black;
background-color: purple;
}
#intro p{
font: bold 80% arial;
position: absolute;
left: auto;
top: 85px;
color: #fff;
padding: 15px 0 0 435px;
margin: 0 0 25px 0;
width: 350px;
line-height: 1.4em;
border: 1px red solid;
}
#nav {
background-color: #09f;
border: solid red 1px;
min-height: 30px;
}
ul {
float: right;
list-style-type: none;
margin: 10px 0;
}
li {
font: bold 12px arial;
display: inline;
padding: 0 17px 0 17px;
border-right: 1px solid white;
}
span {
position:absolute;
top: -100000px;
}
#main {
border: thin green solid;
padding: 25px 25px 0 25px;
background-color: #eee;
min-height: 1000px;
}
div.work {
float: left;
padding: 10px;
/*border: thin red solid;*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background-color: white;
margin: 0 0 25px 0;
}
div.work img {
display: inline;
border: 4px black solid;
float: left;
}
div.work p {
margin: 0;
padding: 10px 0 0 25px;
line-height: 1.3em;
font: 100% arial;
float: left;
border: thin purple solid;
width: 400px;
}
div.work h1 {
margin: 25px 0 0 0;
padding: 10px 0 0 25px;
display: inline;
font: 125% arial;
color: #ff8529;
width: 400px;
float: left;
border: thin green solid;
}
div.work h2 {
display: inline;
margin: 0;
padding: 10px 0 0 25px;
font: 85% arial;
width: 400px;
float: left;
border: thin black solid;
}
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "removed link">
<html xmlns="removed link" xml:lang="en" lang="en">
<head>
<title>Page Title here</title>
<link rel="stylesheet" type="text/css" href="divtest.css" media="screen"/>
</head>
<body>
<!--begin overall page wrapper; sets width and centering-->
<div id="wrapper">
<!--begin header-->
<div id="header">
<p><img src="assets/logoHolder.jpg" alt="Logo alt text here" /><span>Logo description here</span></p>
<div id="intro">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei
usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.</p>
</div>
</div>
<!--end header-->
<!--begin nav-->
<div id="nav"><ul><li><a href="#">Link 1 goes here</a></li><li><a href="#">Link 2 goes here</a></li></ul></div>
<!--end nav-->
<!--begin main content area-->
<div id="main">
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
</div>
<!--end of main container-->
</div>
</body>
</html>
I've been doing a bit of professional work for just a little while now (about a month and a half) as a summer job, but I'm just completely lost at this point and I have a clue as to how to handle this problem. Programming and styling works fine on my main computer (which has no special mods as far as I know) as well as one of my laptops (well family laptop) However, on my father's work laptop, Both macs as well as the computers for both my clients, the CSS stylesheets aren't working properly at all, almost as if certain commands from the stylesheet are ignored. On my dad's work laptop, one of my DIV tabs (the menu bar) width properties (15%) is almost completely ignored. The width of the DIV is actually extended to the point where it's pushed underneath the main content page. Changing the width value to 0 actually does nothing. I'm at a loss. On both my clients computers the main body DIV min-height value doesn't load properly, creating a small space of colour at the top of the page, while the rest of the actual content is properly placed below it. This div holds the background and "boundaries" for the nav bad and the main content. Both of which are not present. Both my father's work laptop and my clients computers use the latest version of IE.and I get these strange errors. I also get the second error when using Safari on both macs. God I love Firefox... it loads everything properly.... Either way, I'm confused as confused can be. HELP!!!! You would need to look in Internet Explorer (probably on windows) for the bug to show up. I've posted in css, because I assume it's something to do with css, but I guess it could be something else. The stylesheet for the page can be found here... http://estore.e-av.co.uk/stylesheet.css I realise there are various other errors on these pages still, but hey, it's a work in progress. It's really weird, if you click around through the pages, about 50% of the time, a white block seems to get drawn over the left and right hand menus (actually, I'm assuming it's over everything, but behind the main content). It follows no pattern, and if you move your cursor over it, it will redraw. It's so weird, and if it was any other browser, I would ignore it - but it's i.e. on windows, the most heavily used browser out there, so I've got to fix it somehow. Has anyone come across this before and managed to fix it?? Anyone got any ideas at all?? Any advice at all would be very much appreciated. Thanks in advance... A friend of mine recently explained to me how css can be used to write webpages without use of any tables whatsoever. I was very sceptical and asked him to show/write me some examples. I immediately noticed that if you use absolute positioning you'll mess up the page presentation on differrent monitor resolutions. Also, for the same reason I found CSS to be unhandy when you have dynamically loaded content. Still, the idea to use div tags and css and abolish tables sounds very tempting, but I want to ask people with more experience than me: Should I stop using tables, is all previous functionality still available without tables, and if not, in what cases, theoretically, it is better to use css and where it is better to use tables? |
|||||||