|
CSS - Position Of A Floating Div Differnet In Ie And Moz Ff :(
hello all. Got a prob, i have got a stylesheet with a load of divs on but one of them has the following structure
Code:
#logodiv {
float: left;
margin-left: 20px;
width:91px;
height:126px;
background-image: url(../images/logo/gglogoweb.gif);
background-position: 1% 2px;
background-repeat:no-repeat;
visibility: visible;
z-index:1;
}
The problem i am having is that i need this in the center of a LHS bar...however the above setting is correct for IE but not for MozFF and Netscape Is there anything i can do to fix this? If anyone has any ideas that would be really great, thanks in advanced RF p.s. here is the complete CSS if needed Code:
body {
margin:0px;
padding:0px;
font-family: Georgia;
color:#333;
background-color:#FFFFDD;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#ccc;
}
p {
font:11px/20px Georgia;
margin:0px 0px 16px 0px;
padding:0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
color:#FFFFDD;
font-size:13px;
text-decoration:none;
/*font-weight:600;*/
font: Georgia;
}
a:link {color:#FFFFDD; font: Georgia;}
a:visited {color:#FFFFDD; font: Georgia;}
a:hover {background-color:#A6AE62; font: Georgia;}
a.greenlink {
color:#A6AE62;
font-size:13px;
text-decoration:none;
font-weight:600;
font: Georgia;
}
a.greenlink:link {color:#667138; font: Georgia;}
a.greenlink:visited {color:#A6AE62; font: Georgia;}
a.greenlink:hover {background-color:#A6AE62; color:#ffffdd; font: Georgia;}
#logodiv {
float: left;
margin-left: 20px;
width:91px;
height:126px;
background-image: url(../images/logo/gglogoweb.gif);
background-position: 1% 2px;
background-repeat:no-repeat;
visibility: visible;
z-index:1;
}
#slogandiv {
height:137px;
background-color:#A6AE62;
visibility: visible;
z-index:0;
/* This is a fix for IE% */
voice-family: "\"}\"";
voice-family:inherit;
height:137px;
}
#MenuBar {
position:absolute;
top: 136px;
left:0px;
width:100%;
height:32px;
padding-bottom:2px;
background-color:#667138;
border-bottom:0px solid #A4AA54;
line-height:17px;
z-index:1;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
height:32px;
}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%; height:32px;}
#Content {
text-align: center;
padding:15px;
border: 0px solid #000000;
background-color:#ffffdd;
z-index:0;
}
#header {
height: 137px;
background-color: #A6AE62;
}
#Menu {
float: left;
width:150px;
padding:10px;
background-color:#667138;
border-right:2px solid #A6AE62;
border-top:0px solid #A6AE62;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}
#randomcontent {
margin:10px 62px 62px 200px;
padding:0px;
border: 1px solid #c0c0c0;
background-color:#FFFFDD;
}
#errormessages {
margin:10px 62px 0px 200px;
padding:10px;
border: 1px solid #c0c0c0;
background-color:#FFFFDD;
}
#adminMenu {
margin:14px 62px 0px 200px;
padding:10px;
border: 1px solid #c0c0c0;
background-color:#FFFFDD;
}
Thanks Similar TutorialsI have seen this done but can't find any examples at the moment, but what I am looking to emmulate is have a page that required vertical scrolling. On either the left or right hand side is (for example) a square image and directly below it is a menu. When the user scrolls down the page the image goes off the top but the menu sticks to the top so is always visable. When the user scrolls back up as soon as the image starts to appear it pushes the menu back down so it is sat below the image. If i used position:fixed I can keep the menu in the same place when scrolling but I would like it to rise to the top of the browser when space is availble when scrolling. Make sense? i want to have two seperate styles for links on my page - how can i do this. i am using dreamweaver. i can only work out how to use one link style, i.e. the a:hover etc.. I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
Hi Everyone, I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on... I think it's a question of Floating. This is in reference to http://www.arabellamusic.co.uk I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking: Code: HTML
<div class='inner'>
<div class='left'>
BLOG PHP HERE
</div>
<div class='right'>
SOME OTHER STUFF HERE
</div>
</div>
And the CSS:
.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }
If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...) So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't. Incidentally, once it would only work when I set 49% to each, I was assuming this was something to do with the box model I read about, but wasn't too sure. I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff! Thanks in advance... James Hi, Can someone help me with why the following header bar doesn't work in Firefox? It just shows the very top of the bar with the two other divs inside of it. Code:
<div class="cmsHeader">
<div style="float: left;">Page Name</div>
<div style="float: right;"><a href="" title='Add Page'><img src='images/icons/file_(add)_16x16.gif' border='0' alt='Add Page'></a></div>
</div>
.cmsHeader{
background: #809096;
padding: 5px;
width: 98%;
color: #FFFFFF;
}
.cmsHeader a{
color: #FFFFFF;
text-decoration: none;
}
.cmsHeader a:hover{
text-decoration: underline;
}
I have 3 tables in a div. I have two of the tables one on top of the other. I wanted to place the third table to the left of the bottom table. So I placed the second table relative and left -50px. I placed the third with position absolute, top -70px and float right to achieve this layout. Is there a better way of doing this out of curiousity? I currently have the following layout Code:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
how do i go about making the same layout but using CSS. Each <td> is 50% wide hi, i am a total newbie with css and trying to create a floating divider. an example can be seen at www.payjunction.com. does anyone know a tutorial on how to create one? thanks for the help in advance Learning CSS and trying to emulate the following table: Code: |--------------------------------------| | Text 1 |----------------| | | Text 2 | Inner box text| | | Text 3 |----------------| | |--------------------------------------| I can get a nested div to work vertically but not horizontally. I'm trying: Code:
div#container { float: left }
div#title { float: right }
<div id="container">
hello<br>hello
<div id="title">
Text 1<br />
Text 2
</div>
</div>
Which is producing: Code: |--------------------------------------| | Hello | | Hello | | |----------------| | | | Text 1 | | | | Text 2 | | | |----------------| | |--------------------------------------| Perhaps a positioning thing which I don't understand yet? It's not homework so you don't have to do it for me, but rather you could just point to knowledge sources.... Tx! Ok. So after some one i don't know on a website i was reading told me i should replace my tables with CSS i decided to listen to them. Now the website's top bar should look like this: http://www.leeksoftware.co.uk And i decided to do each box as a DIV. BUT! I can't get them all in a line. I can get the yellow one to the right of the long one but then i cant get the rest in the line. So far the CSS is: Code:
div.logo
{
height: 70px;
width: 618px;
background-color: #476cD9;
float: left;
}
div.home
{
height: 70px;
width: 100px;
background-color: #E29942;
margin-left: 619px;
float: left;
}
div.soft
{
height: 70px;
width: 100px;
background-color: #CC3333;
margin-left: 719px;
}
div.tuto
{
height: 70px;
width: 100px;
background-color: #006666;
margin-left: 819px;
}
div.cont
{
height: 70px;
width: 100px;
background-color: #254D78;
margin-left: 919px;
}
I tired adding float left to all of them but that made them go diagonal. Can any one help? Thanks Matt I'm Having problems getting my footer to stay below the content of my page. here's the link to my page. http://www.netgamegurus.com/ main page html Code:
<body>
<div class="container">
<div class="header">
<?php include_once("pages/header.php"); ?>
</div>
<div class="main_body">
<?php include_once("pages/index_body.php"); ?>
</div>
</div>
<div class="clearfooter">
</div>
<div class="footer">
<?php include_once("pages/footer.php"); ?>
</div>
</body>
</html>
main page CSS Code:
body {
background-color: #FFFFFF;
text-align:center;
}
body,html {
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 100%;
width: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
.container {
position:relative;
padding:0px;
margin:0px;
margin-bottom: -150px;
width:100%;
height:100%;
background-color:#666;
}
.header {
}
main_body {
}
.clearfooter {
clear:both;
height:150px;
}
.footer {
position:relative;
height:150px;
margin: -150px auto 0 auto;
}
index_body html Code:
<body>
<div class="left_col">
<?php include_once("left_col_index.php"); ?>
</div>
<div class="right_col">
<?php include_once("right_col_index.php"); ?>
</div>
</body>
</html>
index_body CSS Code:
.left_col {
position:absolute;
padding:0px;
margin:0px;
top:175px;
left:0px;
width:150px;
height:100%;
background-color:#00F;
}
.right_col {
position:absolute;
padding:0px;
margin:0px;
top:175px;
left:150px;
width:857px;
height:105%;
background-color:#0C3
}
I've looked up a ton of info on this on google, but nothing seems to help. Anybody got an idea on this? In IE, this will produce the look that I'm looking for. The image and a couple of details are provided inside of a blue box. In FF, they overlap eachother. Not the text, just the image. How can I adjust my CSS? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
.fieldset {
border: #26a solid 1px;
width: 85%;
margin-bottom: 5px;
padding: 10px;
}
-->
</style>
</head>
<body>
<div class="fieldset"> 1: dfas <br />
<hr />
<img src="../../imageApp/images/smallrear.JPG"
width="160"
height="120"
border="0"
align=left hspace="12"/> etwrThis is an edit </div>
<div class="fieldset"> 2: <br />
<hr />
<img src="../../imageApp/images/small100_1737 (Small).JPG"
width="89"
height="120"
border="0"
align=right hspace="12"/> </div>
</body>
</html>
hey I am trying to get this sub menu floating on the rollover of a list item. Here's my HTML: Code: <body> <div id="banner"> </div> <div id="leftmenu"> <ul> <li>List 1</li> <li><a href="">List 2</a></li> <li><a href="">List 3</a> <ul> <li><a href="">List 3.1</a></li> <li><a href="">List 3.2</a></li> <li><a href="">List 3.3</a></li> <li><a href="">List 3.4</a></li> </ul> </li> <li><a href="">List 4</a></li> <li><a href="">List 5</a></li> <li><a href="">List 6</a></li> <li><a href="">List 7</a></li> <li><a href="">List 8</a></li> <li><a href="">List 9</a></li> </ul> </div> <div id="maincontent"> CONTENT </div> </body> and this CSS: Code:
#leftmenu {
position: absolute;
margin: 0px;
top: 120px;
left: 0px;
width: 147px;
height: 800px;
background-color: #cccc66;
font-size: 10px;
font-weight: bold;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul li {
color: #FFFFFF;
display: block;
background-color: #FF0000;
margin-bottom: 1px;
text-align: right;
font-weight: bold;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li a:hover {
color: #000000;
}
ul li ul {
display: none;
position: absolute;
top: 200px;
left: 100px;
}
#maincontent {
position: absolute;
z-index: 0;
left: 147px;
top: 120px;
height: 381px;
width: 100%;
padding-top: 10px;
padding-left: 10px;
margin-top: 0px;
margin-left: 0px;
background-color: #FFFFFF;
font-family: Arial;
font-size: 13px;
}
so yeah, I am struggling at this point, I have looked at a reference that someone gave me last time I brought up the issue, but can't get it working, if you can spot why, help would be appreciated, not having much luck, thinking maybe a syntax thing(?), not sure...HELP!! kr. Hi Guys, Am farely new to CSS and was workin on a wordpress site. when I started getting this error ... Now what I want is three DIVs to be placed side by side on the same background image ... so I instill a wrap ... I want them to look something like this ... http://img244.imageshack.us/img244/8750/wantga3.jpg Here is the code am using .... Code: /* bottom page
================================================= */
#bottom {
width: 1000px;
background: #95A566 url("images/bottom.gif") repeat-x top left;
}
#wrap {
padding-top: 3%;
padding-left: 0;
width: 1000px;
}
#wrap
a:hover {color: #000;}
#wrap ul {
margin-left: 0px;
list-style-type: none;
}
#wrap ul li {
background: url("images/li_bottom.gif") no-repeat;
padding-left: 25px;
background-position: 0 0.4em;
}
.tools {
padding-left: 25px;
background: url("images/leaf2.gif") no-repeat top left;
margin-top: 1.5em;
}
.left {
width: 25%;
float: left;
margin-left: 10%;
}
#bottomnav li a span {
display: none;
}
#bottomnav li a:hover span {
display: inline;
}
.center {
width: 25%;
float: left;
margin-left: 2.5%;
}
#bottomnav li a span {
display: none;
}
#bottomnav li a:hover span {
display: inline;
}
.right {
width: 25%;
float: left;
margin-left: 2.5%;
}
And the Implementation .... Code: <div id="bottom">
<div id="wrap">
<div class="left">
<h3 class="tools">Recent Posts</h3>
<ul>
<?php get_archives('postbypost', 10); ?>
</ul>
<h3 class="tools">Toolshed</h3>
<?php include (TEMPLATEPATH . "/bottomnav_menu.php"); ?>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
</div><!-- end left -->
<div class="center">
<h3 class="tools">Recent Posts</h3>
<ul>
<?php get_archives('postbypost', 10); ?>
</ul>
<h3 class="tools">Toolshed</h3>
<?php include (TEMPLATEPATH . "/bottomnav_menu.php"); ?>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
</div><!-- end center -->
<div class="right">
<h3 class="tools">Recent Comments</h3>
<p><?php mdv_recent_comments(8, 13, '', ' [...]<br />', true, 0); ?></p>
</div><!-- end right -->
Now ... this gives me a perfect view in FireFox .... http://img148.imageshack.us/img148/9121/firefoxej7.jpg But Internet Exploder messes up .... and pushes everything to the right ... http://img148.imageshack.us/img148/5365/ievs9.jpg Can you guys suggest approprate solutions for this Any help would be much appreciated.... Thanks, Abhi Hi, I'm trying to display text in a floating div in the middle of the page. The style is as follows: Code:
.mainContentAreaBackground {
position:absolute;
z-index:11;
top: 190px;
left: 230px;
width:70%;
height:72%;
}
#mainContentArea{
z-index:12;
position:absolute;
overflow:auto;
overflow-x:hidden;
width: 67%;
height: 68%;
top:205px;
left:246px;
text-align:left;
font-family:Tahoma;
font-size:10.0pt;
visibility:visible;
}
There are two anomalies which I think might be bugs in IE's implementation of CSS, and I was hoping someone might be able to give me some advice as to how to get around them. The first problem is that, when going to highlight text in the main content area, all objects on the page are selected, rather than just the intended text. The second anomaly is that, when using the mouse wheel to scroll down in the mainContentArea div when there's overflow, the cursor needs to be hovering over text. If it's hovering over any place with a "hole" in it, such as the space between paragraphs, then it will not scroll. Everything works fine in Firefox. You can see what I'm talking about he http://www.cs.mcgill.ca/~jbeard4/lepdev If anyone has any advice, please let me know. Thanks! -Jake I'm trying to float my navigation to the right side of the screen, but not messing up the order of the links. (left to right as in 1.2.3.4.5). The problem I'm having is the links go right, but so does the order of the links (they show right to left 5.4.3.2.1). Here's the CSS: Code:
ul#nav {
width: 890px;
font-size: 0.70em;
list-style: none;
padding: 0;
margin-top: 3em;
float: left;
clear: both;
}
ul#nav li {
background-color: #0776a0;
text-align: left;
float: right;
text-transform: uppercase;
border-right: 2px solid #279bd5;
display: block;
}
ul#nav li a, ul#nav li a:visited {
display: block;
padding: 0.4em 4em 0.4em 0.4em;
color: #FFF;
text-decoration: none;
}
ul#nav li a:hover {
color: #FFF;
background-color: #279bd5;
text-decoration: none;
}
ul#nav li a.current, ul#nav li a.current:visited, ul#nav li a.current:hover {
color: #FFF;
text-decoration: none;
}
And here's the html Code: <ul id="nav"> <li><a href="Home" title="Home">Home</a></li> <li><a href="Example" title="Example">Example</a></li> </ul> Will also post website with the example if asked. I need some help with aligning a top of a div with another div. My web site is just a screw around hobby thing but here is the web address for it www.penguin.lhup.edu/~ewhite2 the two divs that I am focusing on are .link and #content here is the css code for them css Code: Original - css Code .link{ float: left; width: 115px; background-color: #000000; text-align: center; margin: 10px 0 0px 13px; clear: both; } #content{ margin: 10px 17px 4px 0; width: 625px; float: right; }
any help would be awesome and a head of time thank for all who take the time to read this post and for responding to it if you do. Hello, can anyone help me with this? I'm having trouble floating some divs and I can't find the problem. 1. navigation should be aligned with the bottom of the h1 logo 2. the content div should come next to the list of brands. The content div should overlap the black bg at the top. www. claeysconsult . be / misskado / index2.html Thanks in advance... Hi im experiencing big problems with creating this layout. I spent whole day with positiooning this divs but i cant do this final layout. Everytime i want to float divs to left DIV 1 and DIV 2 are ok but DIV 3 jump to new line under DIV 2 and dont fit the gap between DIV 3 and div 1 . Can someone please help me ? Thanks ... link to image : xipic.eu/ufiles/njf25uy8_divs.png I have recently created a design in which the main content and sidebar are both floated right, but I've been having a problem. For whatever reason, the main content has been floating slightly below my sidebar. Could anyone please look at the code and tell me how to fix it? Thanks a ton, go here to view my problematic design. I've had to write the address differently because "new user accounts are not permitted to create posts containing URLs." wendyhenrichs (dot) com (slash) pin. If you had trouble understanding my above message, here's the address with spaces in them (just remove the spaces in your address bar): http:// www . wendyhenrichs . com / pin Please just take a quick look. Thanks! |
|||||||