|
CSS - 10px Layer Position Problem With Css -> Mozilla Only
I've seen a fix for this online before, but I can't seem to find it now.
Basically I've got the following layer declartion: HTML Code _NOT_ php PHP Code: <div style=" color: black; font-size: 10pt; font-family: arial; text-align: center; visibility: hidden; display: block; position: absolute; z-index: 3; top: 115px" id="default"> When I make this layer visible it shows up in the exact position I want it to in most browsers, but in Mozilla it is 10 pixels to low. How can I get this layer to show up on Mozilla in the same pos as IE? Should I use javascript to adjust that "top" to 125 if its Mozilla? Or is there a CSS way to resolve this. Similar TutorialsI have done alot of changing around settings, sizing from absolute to relative, margins to widths, and i still cant figure out what is urking my page when loaded from mozilla-firefox and netscape. The page works fine when used with Internet Explorer. Does anyone have a chance to take a look at it here at <a href> www.wolfdogg.soldierlink.com/html using Firefox and IE? style sheet is at <a href> http://www.wolfdogg.soldierlink.com/main-reworked.css or would you prefer i post the code is there actually a website that i can go to that will have a list of the extra styles that firefox and netscape needs that are automatic and uneccesary on internet explorer? Thanks a bunch, WolfDogg I have a layer with some text, (the code is not mine) in IE it does what I want: It shrinks when the user makes the browser window smaller, in mozilla however, it doesn't work like that. What is wrong here? I must admit, that programming for every browser is not my best side, and I think I'd be better to make mozilla the reference instead of IE. but for now, maybe someone can help out? the code: Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>One Hundred Percent height Divs</title>
<style type="text/css" media="screen">
html{height:100%; width:100%;}
body {
margin-top:100px;
padding:0;
margin-bottom:199px;
height:100%; /* this is the key! */
}
#right {
margin-left:300px;
width:200px;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
overflow:auto;
border:11px solid #333;
}
#right p {
padding:0 10px;
}
</style>
</head>
<body>
<div id="right">
<p class="top">To solve an inheritance issue displayed in div #right as rendered in Opera, class p.top
using margin-top:20; is applied to the first paragraph of each outer divs.</p>
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
</body>
</html>
many thanks!! Dreamweaver. I built a simple animated banner: two overlapped layers containing an image with their own link. Timeline to define hide/show timing. It works fine at the top of the page (absolute position) Now I need to place the animation in the row #11 of a dynamic table. In CSS Rules I set "relative" position for these two layers and they are shown inside row #11. Timeline is played but layers are not overlapping. I've tried some settings but I get always the same. Any idea on how overlap theese two layers with relative position? Thank you in advance. Hello, I've been trying to find a solution to this on the board already but nothing quite answers what Im trying to do. I have a layer that opens from this css: Code: #helplayeropen {
margin-top: auto;
margin-right: auto;
float: right;
position: relative;
right: 0px;
top: 80%;
z-index: auto;
visibility: hidden;
}
The problem is that if the page is scrollable, when you scroll to the bottom and open the layer, it opens the layer 80% from the top of the original screen, not the new view of the page. 80% from the real top, not 80% from the top of your current view of the page. Is there any way to get the layer to open 80% from the top of the screen that you are viewing and not from the absolute top. Heres an example of whats going on Go here and click on the help chilli (right floating layer) Hello all i am having trouble with getting a layer to stay put when i school down the page. This is my code: Code:
#Layer1 {
position:absolute;
width:64px;
height:73px;
z-index:1;
left: 0px;
top: 101px;
}
<div id="Layer1">
<div align="left"><img src="images/gun.gif" width="58" height="73" /></div>
</div>
Everytime i scroll down the image goes with it. I need it stay where i put it without moving at all. If anyone could help then that would be great David Hi there, What I am looking to do is have a layer that is in front of the rest of the page, that is always there and doesn't move when the rest of the page is scrolled. Basically I want an overlay at the bottom of the browser that shows an image, but this image should always be on screen at that exact position in the browser. The site in question is he earlybirdarts.co.uk Sorry if I am explaining myself badly, I can be bad with words sometimes. Any help is greatly appreciated :-) Regards, Lawrence Ok, I thought I had some idea what I was doing, but I'm starting to realize that I have none... If everything is square in the top-left corner there is _NO_ problem, everything looks fine. However, when I set the content of the page to _center_ obviously the positions of the dropdown menus get messed up. Is there anyway for the dropdowns to follow the bottom of the "Weddings" text? I.E. when the user stretches their window window open further it still lines up in the correct place? Should all 3 parts be on layers? or is it ok to have two tables, and a pull down menu as a layer? I have a vertical menu on the left-hand side of my website, everything appears correctly when the page is first loaded but when I click on a menu item the entire div appears to shift to the left (10px). If I refresh the page it also appears correctly, so it is only when I have clicked on a menu item. I do know that there are plenty of problems with IE, but the menu does appear and function correctly in both IE and Opera. I am only having the problem with Mozilla. I am thinking that it may be something to do with the link visited properties but am not sure what. I have validated the css via the W3C website but there were no errors reported. The css segment is as follows: #subnavcontainer { position: absolute; left: 10px; top: 0px; margin-top:0px; padding-top: 0px; height: 700px; width: 160px; background: url("../images/bg_vert.gif") no-repeat; } #subnavcontainer ul { list-style-type: none; color: #000; margin-top: 0px; margin-left: 0px; padding-left: 0px; padding-top: 0px; font-family: Arial, Helvetica, sans-serif; display: block; width: 200px; background-color: #D7D7D7; } #subnavcontainer li { padding-left: 0px; margin-top: 1px; } #subnavcontainer ul li { margin: 0 0 1px 0; padding-left: 0px; } #subnavcontainer ul a { display: block; padding: 0px 2px 2px 5px; width: 160px; color: #000; background-color: #F0EFEE; text-decoration: none; border-left: 4px solid #B09292; } #subnavcontainer ul a:hover { color: #000; background-color: #fff; text-decoration: none; border-left: 4px solid #FF0000; } The html segment is as follows: <div id="subnavcontainer"> <ul> <li> <a href="../content/company/se_company_overview.htm" target="mainFrame">Overview</a> </li> <li> <a href="../content/company/se_company_location.htm" target="mainFrame">Location</a> </li> <li> <a href="../content/company/se_company_contact.htm" target="mainFrame">Contact</a> </li> </ul> </div> I've never done much CSS work, but I know this has to be an easy fix. Each DIV appears to be 10px higher when viewed in IE. I want them to be 8px high and they end up being 18px high. In Firefox, Netscape, and Opera it works fine. Anyone mind correcting this imbarrassing little problem? 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" xml:lang="en" >
<head>
<title>IE 10px Padding Problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0px; }
#container {
position:relative;
margin:auto;
width:730px; }
#header {
height:110px; }
.textualtop {
border:1px solid #000000;
height:8px; }
.textualbottom {
border:1px solid #000000;
height:8px; }
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<p>Notice how in IE6 each DIV is 10px higher then in FF. Why is it doing this?</p>
</div>
</body>
</html>
I've been re-designing my site in valid XHTML 1.1 and CSS, and I've hit a bit of a problem.... Everything works perfectly in Firefox, but IE isn't liking things at all. The navbar at the left should stretch all the way to the bottom image, but it isnt having it. I've tried messing with it for about an hour now, and can't fix it.... The page can be found at URL and the stylesheet at URL Oh, and I know the colours are all messed up, I'll fix that later :P Edit: Fixed bbCode Im stumped, its probably something simple but it looks like all relative positioned elements are about 10px towards the bottom when viewed in Mozilla. Its laying out right in IE though. Ideas? Thanks! www.howenstinedesign.com/pla/index.html 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;
}
I am trying to put left and right shadows on a layer, I am doing this by using two alternatively padded layers on top of each other. This code does that: PHP Code: #maincontent{ background-image: url(images/layout/contentpanel/contentpanel_background.gif); background-repeat: repeat-y; background-position: left; border: 0px !important; padding-left: 30px; } #maincontent_inner{ background-image: url(images/layout/contentpanel/contentpanel_backgroundright.gif); background-repeat: repeat-y; background-position: right; border: 0px !important; padding-right: 30px; } PHP Code: <div id="hold_content"> <div id="maincontent"> <div id="maincontent_inner"><? include("includes/homepageloremipsum.php")?> </div><!-- End maincontent_inner --> </div><!-- End maincontent --> </div> Now, in firefox the shadow images work fine, however, on IE they start about 2 inches down. However, after scrolling up and down the page they start at the top so this is obviously some kind of layering problem. I can't work out what though. Any ideas? (never mind, i dont need layers anyways) Sorry, pls delete this! Hi, the foolowing code is highlighting some options that I have in a layer sitting on top of a tablet type object. In IE the options are displayed 'inside' the tablet. In Firefox they are spread out down the page into my footer, any ideas what I can add to contain them within the tablet layer? PHP Code: <div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 1px; top: 188px; visibility:visible" id="layer2"> <div style="position: absolute; width: 100px; height: 24px; z-index: 1; left: 46px; top: 35px; visibility:visible; right:0; bottom:0" id="layer3"> <p align="center"><font color="#4E261B"><b> <span style="font-size: 11pt"> <a href="home" style="text-decoration: none"> <font color="#4E261B">Home</font></a></span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">About US</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">User Register</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">User Log-in</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">Supplier Log-in</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">Join Head2Toe</span></b></font></div> <img border="0" src="images/bridetablet1.bmp" width="190" height="302"></div> <p></div> <!-- to clear footer --> </div><!-- end outer div --> Layer 2 is the tablet, layer 3 is the text on top. if you need anything else, please let me know. Thanks, G Hi everyone, I am having a very difficult problem using Dreamweaver and I would be very grateful for any advice given. I recently created a simple website using layers and when I previewed it, it looked great and it had no reported browser errors. I had several people view it and only one of my friends had trouble seeing it. He said that the layers were out of position and sometimes overlaped. We both were using Explorer 6.0. The only difference between our computers is that he has a 21" monitor while I have a 17". Would that effect the web page design? Why are the layers not positioning correctly? If anyone needs to view the website it can be seen at http://sky.prohosting.com/lovecare Please help me! Thanks, Steve Hello, someone call tell me why this code didnt work? i try to put some flash banner in nested divs using z-index and its not working the flash div is above the higher div. i am tryin to href the flash banner: Code:
<asp:FormView DataSourceID="SqlDataSource20" runat="server">
<ItemTemplate>
<div style="width:728px; height:90px; position:relative; padding:0px; margin:0px; z-index:100; cursor:pointer; display:block; background-color:Lime;" onclick="window.new('<%#Eval("destUrl") %>', '_blank');">
<div style="width:728px; height:90px; position:absolute; left:0px; top:0px; padding:0px; margin:0px; z-index:-1; display:block;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="728" height="90">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="<%#Eval("bannerSrc") %>" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="opaque" />
</object>
</div>
</div>
</ItemTemplate>
</asp:FormView>
Yes........it's me again with more problems. In trying to solve some other problems I went to using contrasting bg colors so I could see what was going on per Kravvitz suggestion. So here is what I have body bg color set at gold #whiteBorder - set at white #page bg set at green; border hot pink and then #topbar and #sideColumn set at powder blue. The problems is that the 10px whiteBorder shows on the top and left - but not on the right and bottom and I have no clue why. Here is the css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #FFCC33;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #FF00FF;
background-color: #339900;
overflow: hidden;
margin: auto;
text-align: left;
}
#whiteBorder {
border: 10px solid #FFFFFF;
width: 100%;
height: 100%;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
h1 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size:20px;
font-weight: bold;
margin-bottom: 10px;
}
h2 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 16px;
font-weight: bold;
}
h3 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
h4 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 14px;
font-weight: bold;
}
p a:link, a:visited {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
p a:hover, p a:active {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094F9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 100%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
margin-left: 185px;
}
Here is the xhtml: Code: <body>
<!--begin page -->
<div id="page">
<!--begin white border -->
<div id="whiteBorder">
<!--begin header -->
<div id="header"><img src="../images/vitalograph_spirometers_logo.gif" width="230" height="36" alt="vitalograph spirometers logo" />
<span class="tagline">world leaders in spirometry</span>
</div>
<!--end of header -->
<!--begin topbar -->
<div id="topbar">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../about_us/about_us.html">About Us</a></li>
<li><a href="../other_regions.html">Other Regions</a></li>
</ul>
</div>
<!--end topbar -->
<!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="../products/spirometers.html">Spirometers</a></li>
<li><a href="../products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="../products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="../products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="../products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="../resources/customer_support.html">Customer Support</a></li>
<li><a href="../resources/training_services.html">Training & Services</a></li>
<li><a href="../resources/exhibitions.html">Exhibitions</a></li>
<li><a href="../resources/newsletters.html">Newsletters</a></li>
<li><a href="../resources/downloads.html">Downloads</a></li>
<li><a href="../resources/useful_links.html">Useful Links</a></li>
<li><a href="../resources/industry_information.html">Industry Information</a></li>
<li><a href="../resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- TemplateBeginEditable name="Main_Section" -->Main_Section<!-- TemplateEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
</div>
<!--end of white border -->
</div>
<!--end of page -->
</body>
Thanks My website (OPM) uses css for all the layout. Sometimes, when I load a new page within the website, the entire webpage appears nested within one of the layers. When I reload the page, this effect disappears right away or after a few reloads. It appears about 10% of the time and occurs in several different browsers (i.e. Firefox, IE). Nested webpage error URL Normal page URL I don't know why this is happening, especially since it's only part of time. Please help! Thank you, Misha |
|||||||