|
CSS - Css Image Positioning Issue
I need to have numerous images overlap exactly on top of one another at the upper left corner of a frame cell.
When I use absolute positioning, the image is not where it is supposed to be in relation to the table cell. Relative works, but I cannot seem to overlay the images, as adding images via relative layers just acts as if the images are not in layers at all (i.e. they take up the same space that they would in a normal flowing page) Is there any way I can make the images be placed relative to the corner of the table cell? I'm somewhat new to layers, so any help would be greatly appreciated. Here is example code <TABLE WIDTH=500 HEIGHT=500 BORDER=0> <TR> <TD width=300 height=100> Need image1 to go in this cell, as well as image2, image3, and image4. All need to overlap perfectly in relation to the constraints of this table cell. Here is the code I use in the cell for the first 2 layers which just flow one under the other- yet I need them to overlap. <div id="Layer1" style="position:relative; width:518px; height:322px; z-index:1; visibility: visible;"><img src="images/Map2.gif" usemap="#Map" border=0></div> <div id="Layer2" style="position:relative; width:518px; height:322px; z-index:2; visibility: hidden;"><img src="images/iloverlay.gif" usemap="#Map" border=0></div> </TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> </TR> <table> Similar TutorialsHi everyone, For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine. So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html but I don't see what he did to solve it. Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating . I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions. Thanks in advance if you can give a DIV newbie a heads up. Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>
I have a two column DIV arrangment (inside a one coulmn page layout), and above it, I want a single div that will contain absolut positioned images. Here's the two column CSS: Quote: /* 2 column div setup for map and sidebar */ #mapwrap { width:980px; margin:0 auto; } #mapmain { float:right; width:680px; } #mapsidebar { float:left; width:300px; } #testimg { position:relative; left:100px; top:150px; } And... Code:
<div id="buttondiv"><img src="/images/buttons/7on.png" id="testimg"></div>
<div id="mapwrap">
<div id="mapsidebar">
<div id="findaddydiv">
Something
</div>
</div>
<div id="mapmain">
Something Else
</div>
</div>
My problem is that when I build the DIV for the images in the code above the two column set-up, and view the whole thing, the images are ON TOP of the two coulun DIVs. How to force the image DIV to be ABOVE the two-column set-up? Hello, Im making my Dad a website for his London Tour company, and ive pretty much got everything the way i want, i just need to add the content. However my only issue is that the positions of certain things changes in I.E.. Example: http://www.aranock-online.com/projecta In Firefox it works fine, In i.e it doesnt I am trying to place an element in a page that will over lap other elements. If I use position: relative; the element (a div cell) gets to far down on the page. If I use position: absolute to specify the verical position but not the horizontal it works perfectly in Firefox, but not IE (because IE requires both a vertical and horizontal specification in their abosolute positioning) works in Firefox, but not IE Code: position: absolute; top: 170px; I cant specify a horizontal position because the div cell needs to be inside another cell that is centered (so when the window is resized the main cell moves around. Here is the page because I'm sure my explanation is confusing. http://www.davenport-rock.com/news.php If you look at it in fire fox it looks good, but in IE, its not lined up right. Does someone know how to make this work in IE (and other browsers)? I am learning css and ran into a problem I can't figure out. When I add text in my main content div, it does push my footer down like I want it to. However, it keeps the existing space in the div between the content and the footer leaving a large gap at the bottom of the screen. Can anybody help me? The developing site is he thinkfishdesign - dot - com/temp/tf/ This is the css code : Code: @charset "utf-8";
/*-------------------
Style Template
-------------------*/
/*-------------------
HTML Styles
-------------------*/
body {
text-align: center;
margin: 0px;
background-color: #FFF;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.3em;
}
/*-------------------
Structural Styles
-------------------*/
#container-content {
position:relative;
margin:0 auto;
height:auto;
width:980px;
height:auto;
text-align:left;
}
#container-page {
position:relative;
width:100%;
height:auto;
text-align:center;
}
#content-container {
position:relative;
top:-17em;
width:100%;
}
#content {
position:relative;
left:13em;
top:-33em;
width:45em;
}
#content-main {
position:relative;
width:100%;
height:auto;
}
#footer {
position:relative;
top:0em;
width:100%;
height:12.6em;
}
.footer {
background-image:url(images/template_footer.jpg);
background-repeat:no-repeat;
}
#intro {
position:relative;
left:20em;
top: -34em;
width:38em;
height:8.8em;
white-space:normal;
}
#logo {
position:relative;
left:50em;
top:-19em;
width:11em;
height:11em;
}
.logo {
background-image:url(images/template_logo.jpg);
background-repeat:no-repeat;
}
#photo-main {
position:relative;
left:1em;
top:1em;
width:16em;
height:20em;
}
.photo-main {
background-image:url(images/template_fish.jpg);
background-repeat:no-repeat;
}
/*-------------------
Side Navigation Styles
-------------------*/
#nav-container {
position:relative;
left:1.3em;
top:-12em;
width:12em;
height:19em;
}
.nav {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1em;
}
.link-nav a {
color: #000;
text-decoration: none;
}
.link-nav a:visited {
color: #000;
text-decoration: none;
}
.link-nav a:hover {
color: #F60;
text-decoration: underline;
}
/*-------------------
Footer Navigation Styles
-------------------*/
#footer-nav{
position:relative;
top:13em;
left:3em;
width:40em;
height:2em;
}
.nav-footer {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1em;
}
.link-footer a {
color: #F60;
text-decoration: underline;
}
.link-footer a:visited {
color: #F60;
text-decoration: underline;
}
.link-footer a:hover {
color: #900;
text-decoration: underline;
}
I just used position: relative;. Solved. Hi I am not really very familiar with the positioning element. I have a site that has a fixed width in the center of the page. It all works fine. However there is a hidden box that pops up when you enter any text in the newsletter box at the top right - this appears outside of the fixed width and I cannot understand why it is allowed to do so. I notice that it does have "absolute" positioning defined in the CSS. Any clues as to what I can do to bring it back to its correct place under the newsletter box? Thanks a lot Site: http://www.componentcompare.com EDIT: Thanks for the help -- i've switched over to a more stable template so no need to help with the code below. Hey all, The problematic CSS codes a .rightbar { position:relative; top:292px; left:444px; float:right; text-align: left; width: 300px; height:250px; background: white; color: #000000; } #mogad { position: relative; top:0px; left:-15px; width: 300px; height: 250px; float: right; padding-left: 0px; padding-top: 20px; margin-left: 160px; } and #header{ padding:20px 0px 40px 0px; margin-left: 242px; position:relative; text-align: left; background: url((URL address for bg img)) no-repeat top left; } If you open the link in Firefox/Safari you can see that the Ad in the top right corner is to sit side-by-side with the main header image. The Ad also lines up with the rightbar links directly beneath it. The problem(s) are in IE where the Ad and rightbar links remain in the correct spot but the header height increases inexplicably and sort of messes up the organization. Any thoughts? If you would like more code let me know and I will do my best to be more descriptive. Thank you in advance for any help! Paul I have a page with a bunch of DIVs i'm trying to get positioned correctly. I want to have two DIVs sit next to each other, so I float one, right? I can get them to sit next to each other, but then the top line of the content in the 2nd DIV sinks down below the floated div. I can't get it to work. Any help? CSS: Code: html{}
body{
color: #000000;
margin: 0;
padding: 0;
background-color: #666666;
}
.container{
height: auto;
width: 650px;
margin: 0px 0px 0px 0px;
background-color: #333333;
}
/* Container Styles */
#news{
float:left;
position:relative;
width: 295px;
background-color: #FFF;
margin: 0px 0px 10px 25px;
}
#contact{
width: 295px;
background-color: #FFF;
margin: 0px 0px 10px 0px;
position:relative;
left: 325px;
}
HTML: Code: <div class="container"> <div id="news"> <h2>News</h2> <ul class="newslist"> <li>12.11.03 + news text...</li> <li>11.12.02 + more news text...</li> </ul> </div> <div id="contact"> <h2>Contact</h2> <ul class="contactlist"> <li><a href="#">mail be...</a></li> <li><a href="#">Design by ....</a></li> </ul> </div> </div> Thanks! Hi everyone, I'm a noob to most of this so take it easy on me. I'm developing a page with a vertically aligned tabber (eventually) full of info. The code I've used was for a horizontally aligned tabber so I read up and changed the CSS to make the thing vertical. I've managed to get it in FF (and chrome and safari) so that the tabbed info div is appearing behind the navigation (which I like and want to keep) but in IE it doesn't stack at all. It re-aligns below the navigation if it's set to any more than pixel wider than the space it's got. If you look at my page in FF and IE http://king-asia.co.uk/test/about.html you'll see what I mean. I figured it should be a z-index trick but nothing I've tried seems to layer the content div and the nav div in IE. I've pasted in my code below. Can anyone spot the error(s)? CSS: Code: .tabberlive .tabbertabhide {
display:none;
border:1px solid #aaa;
width:538px;
height:400px;
position:relative;
float:right;
}
.tabber {
position:relative;
}
.tabberlive {
}
ul.tabbernav
{
margin:0;
padding: 0em;
font: bold 12px Verdana, sans-serif;
position:fixed;
float:left;
z-index:1;
}
ul.tabbernav li
{
list-style: none;
margin-left: 0;
display: block;
position:relative;
text-align:left;
}
ul.tabbernav li a
{
padding: 0.25em;
margin-top: 15px;
text-decoration: none;
display:block;
background: #DDE;
border: 1px solid #778;
}
ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover
{
color: #448;
background: #AAE;
text-decoration:none;
}
ul.tabbernav li.tabberactive a
{
text-decoration:none;
background-color: #fff;
border-right: 1px solid white;
margin-top:15px;
}
ul.tabbernav li.tabberactive a:hover
{
color: #448;
text-decoration:none;
}
.tabberlive .tabbertab {
border:1px solid #aaa;
width:540px;
height:400px;
position:relative;
float:right;
z-index:0;
}
.tabberlive .tabbertab h1 {
display:none;
}
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
Tabber: Code:
<div class="style18" style="background-color:#FFF;">
<div class="tabber" style="background-color:#FFF;">
<!-- History -->
<div class="tabbertab" title="History">
<div class="style18" style="padding:1em; text-align:left;"><h3>History</h3>This is the bit about our company's history. This is the bit about our company's history. This is the bit about our company's history. This is the bit about our company's history.
</div>
</div>
<!-- What We Do -->
<div class="tabbertab" title="What We Do">
<div class="style18" style="padding:1em; text-align:left;"><h3>What We Do</h3><table class="style18" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>passion for good food. This is the bit more about ourrrent projects. This is the bit more about our current projects. passion for good food. This is the bit more about ourrrent projects. This is the bit more about our current projects. passion for good food. This is the bit more about ourrrent projects. This is the bit more about our current projects. </td>
</tr>
</table>
</div>
</div>
<!-- Business Philosophy -->
<div class="tabbertab" title="Business Philosophy">
<div class="style18" style="padding:1em; text-align:left;"><h3>Business Philosophy</h3>This is the bit more about our passion for good food. This is the bit more about our passion for good food. This is the bit more about our passion for good food. This is the bit more about our passion for good food.
</div>
</div>
<!-- Quality Driven -->
<div class="tabbertab" title="Quality Assurance">
<div class="style18" style="padding:1em; text-align:left;"><h3>Quality Assurance</h3>This is the bit more about what we do. This is the bit more about what we do. This is the bit more about what we do. This is the bit more about what we do.
</div>
</div>
</div>
</div>
This is really starting to frustrate after I've spent 2 days solid on it and but cannot get round the problem. Help wold be greatly appreciated. Currently I am building a not for profit food website. An aim of the site is using pure CSS positioning - no tables. The problem I have encountered relates to positioning two images side by with heading text below within a positioned DIV. The screen design can be seen here Note the Recipe box which contains the two images of Hummus and Roast Duck. Getting this into HTML and CSS is proving to be difficult. My efforts can be found here Within the containing DIV I have placed two DIVs to hold each image and eventually the text headers. Code: <div id="SplashContainerLeft"> <h3><a href="#">Recipes</a></h3> <div class="ContainerTest"> <img class="" src="images/recipes/homus.jpg" alt="homus"/> <!-- <p class="SplashImageTitleLeft">Homus</p> --> </div> <div class="ContainerTest" style=""> <img class="" src="images/recipes/roastduck.jpg" alt="roastduck"/> <!-- <p class="SplashImageTitleRight">Roast Duck</p> --> </div> </div> The CSS is as follows Code: #SplashContainerLeft {
border: 2px solid #DFDFFF;
margin-left: 30%;
width: 15%;
}
#SplashContainerLeft h3{
text-align: center;
text-transform: uppercase;
}
#SplashContainerLeft h3 a:hover{
text-decoration: none;
}
.ContainerTest {
border: 1px solid black; /*for testing */
width: 50%;
display: inline;
}
The problem is the width value is ignored when an element is inline. Otherwise this solution would work well. Having two container DIVs would enable the images and headers to be nicely aligned using margin: 0 auto (also not working on the pages at the mo, possible DTD problem) Does anyone have any suggestions? Thanks for anyones help and time in advance.. Even if you just read the post. BuR Hi all I have uploaded the page I am having problems with to http://www.nickcb.com/JesseHora/ so you can check it out and see my problem. The problem is that I want to have about a 10px margin between each of the horizontal bars. (The red will be different images eventually) Previously the site was left justified and the black portions of the bars were not there. I used a relative positioning to move the bars up slightly to cover up the area where the bubble on the end would be. The bubble on the end is floated over banner image so that the image can be switched with PHP at a later date. The person I am making it for decided that they wanted the site centered with black bars extending to the left side of the screen. I did this with the class .blackleft in the code below. That seems to work except it pushed all the horizontal bars further apart. This makes sense though because there is an addition horizontal item that pushes them down. Now the problem is that if I increase the amount that I relatively position each bar up it only moves the second bar up. To maintain an even spacing I have to keep moving each bar up by more and more. I could do this because I am going to generate the page with PHP but I would prefer to fix it in CSS. Page HTML (view source on above page for all code) Code: <div class="container"> <div class="blackleftnew"></div> <div class="barnew"> <a href="page.php"> <img src="images/banner.gif" width="700" height="97" class="bannernew"/> <img src="images/illustration_new.gif" class="typebubblenew"/> </a> </div> <div class="blackleft" style="top: -140px"></div> <div class="bar" style="top: -249px"> <a href="page.php"> <img src="images/banner.gif" width="700" height="97" class="banner"/> <img src="images/design.gif" width="100" height="100" class="typebubble"/> </a> </div> <div class="blackleft" style="top: -240px"></div> <div class="bar" style="top: -349px"> <a href="page.php"> <img src="images/banner.gif" width="700" height="97" class="banner"/> <img src="images/dircord.gif" width="100" height="100" class="typebubble"/> </a> </div> <div class="blackleft"></div> <div class="bar"> <a href="page.php"> <img src="images/banner.gif" width="700" height="97" class="banner"/> <img src="images/artdir.gif" width="100" height="100" class="typebubble"/> </a> </div> <div class="blackleft"></div> <div class="bar"> <a href="page.php"> <img src="images/banner.gif" width="700" height="97" class="banner"/> <img src="images/random.gif" width="100" height="100" class="typebubble"/> </a> </div> <div class="blackleft"></div> <div class="bar"> <a href="page.php"> <img src="images/banner.gif" width="700" height="97" class="banner"/> <img src="images/photo.gif" width="100" height="100" class="typebubble"/> </a> </div> Style Sheet (excerpt) Code:
.container {
z-index: 0;
width: 744px;
padding: 0px;
margin: 0 auto 0 auto;
}
.blackleft {
z-index: 1;
position: relative;
top: -40px;
left: -700px;
width: 744px;
height: 97px;
background-color: black;
}
.bar {
z-index: 5;
position: relative;
top: -149px;
margin: 10px 0px 10px 0px;
overflow: hidden;
height: 105px;
}
.typebubble {
z-index: 10;
display: block;
margin: 0px;
padding: 0px;
position: relative;
top: -100px;
left: +645px;
}
.blackleftnew {
z-index: 1;
position: relative;
top: 10px;
left: -700px;
width: 744px;
height: 97px;
background-color: black;
}
.barnew {
z-index: 5;
position: relative;
top: -137px;
margin: 10px 0px 10px 0px;
overflow: hidden;
height: 145px;
}
.typebubblenew {
z-index: 30;
position: relative;
top: -130px;
left: +625px;
}
.bannernew {
display: block;
margin-top: 40px;
}
.banner {
margin-top: 2px;
}
.footer {
position: relative;
top: -40px;
text-align: center;
}
Thanks for any help. Hi there, Was hoping somebody could help me. I've been working on a new footer for a company and have got a positioning issue with it. If the content of the page is rather long, it will go under the footer with the footer displaying over the top and the content carrying on below it rather than moving the footer down as long as it needs to. I've tried playing with the CSS of the DIV ID 'content' which the content sits in, and the DIV ID 'footertest' which is the footer and the below displays a test page that is the closed I have it to work. The long list of 'testing' at the bottom should obviously push the footer down not go underneath and beyond it down the page. The current CSS for 'content' and 'footertest' is as follows: #content { width: 512px; padding:3px; margin:5px; margin-left:18px; float: left; /*border:1px solid #000000;*/ } #footertest { background-image:url(/images/footertest.png); height:70px; width:951px; margin-left:14px; position:absolute; } I'm unable to post URLs yet so cannot provide the link to the test page I have setup. Hello, I'm building a portfolio for a close friend of mine and I REALLY can't seem to figure out this navigation menu she wants me to make. I have the menu in place but the drop down is both WAY too far to the right and UNDER the slideshow. Could anyone kindly show me how to get that stupid thing to appear UNDER the 'Galleries' section and ABOVE the slideshow? http://saranicolephotography.com/ Thanks! I've got a pretty basic layout: Code: <div id="wrapper"> <div id="LeftBar"></div> <div id="Header"></div> <div id="MainContentPane"> </div> <div id="Footer"></div> </div> The Footer runs the full width of the page. The Leftbar runs from the top of the page to the top of the Footer. The header runs from the right side of the Leftbar to the width of the wrapper. The MainContentPane runs from the right side of the Leftbar, bottom of the Header to the top of the Footer. The Leftbar contains a vertical graphic as a background and it does not contain any other content. I'm trying to figure out how to make the Footer sit tight to the bottom of what ever content is in the MainContentPane section and have the Leftbar not show below the Footer if the MainContentPane is vertically smaller then the background image in the Leftbar. The look of the page is pretty straight forward and common so if my explanation is confusing I apologize. TIA Hello All, I have a left navigation bar that seems to be working perfectly in Firefox and Safari. However (I know, you've heard this before!), when I open the page in IE, there is no list appearing whatsoever. When I hover in a place outside of where the ul is supposed to be, I can find where the menu is, but it is not functioning well. Could someone please take a look and provide some insight? I have tried a few different things but they are mostly guesses as this is pushing my understanding of CSS a bit. The menu is supposed to appear under the "Select a Tool" text... 029c92a.netsolhost.com/brushes.html Best Regards, Colin Hi Everyone I have created a design in CSS and HTML but it appears differently in all of the browsers that I have tested it on can anyone take a look and tell me where I am goin wrong? HTML 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" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>
<body>
<div class="wrapper">
<div id="hometext" style="background-color: transparent">{content}</div>
<div class="mainbody" style="background-color: transparent">
<div class="headermenu"><a href="http://live.orotor.co.uk">Home</a> | <a href="http://live.orotoro.co.uk/index.php?page=stock">Stock</a> | <a href="http://live.orotoro.co.uk/brochure.html">Brochure</a></div>
<div class="headerlogo"><img src="img/logo.gif" border="0" /></div>
<div class="washingline"><img src="img/washingline.png" border="0" usemap="#Stock" />
<map name="Stock" id="Stock">
<area shape="poly" coords="47,151,129,159,136,96,142,98,156,82,141,56,115,46,82,43,55,45,33,71,44,86,52,88" href="#" alt="Apply here for Credit!" />
<area shape="poly" coords="199,182,282,187,283,123,289,125,306,106,285,81,262,74,228,75,202,80,180,105,194,122,198,118,200,121" href="#" alt="Our Garment Specifications" />
<area shape="poly" coords="384,196,467,193,465,130,471,130,483,112,463,88,438,82,407,82,380,90,360,115,373,132,381,131" href="#" alt="Look at our Wonderful colours" />
<area shape="poly" coords="627,181,700,143,671,86,678,86,682,61,652,50,627,55,598,69,578,89,570,121,591,130,598,126" href="#" alt="See our latest stock levels" />
</map>
</div>
<div style="position: absolute; top: 530px; height: 99px; width: 793px; margin: 0 auto;"><img src="img/footerbanner.png" border="0" /></div>
</div>
</div>
</body>
</html>
CSS Code:
body {
margin: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12.5px;
font-weight: 600;
overflow: hidden;
}
a {
text-decoration: none;
color: #000000;
}
input
{
height: 20px;
width: 250px;
border: 1px solid #e7ca3c;
background-color: transparent;
color: #000000;
}
textarea
{
height: 100px;
width: 249px;
border: 1px solid #e7ca3c;
background-color: transparent;
color: #000000;
}
a:hover {
text-decoration: none;
color: #e7ca3c;
}
.wrapper
{
margin: 25px auto;
width: 794px;
height: 748px;
text-align: center;
overflow: hidden;
}
.mainbody
{
width: 794px;
height: 748px;
background-image: url(img/background.gif);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
border-top: 1px solid #e7ca3c;
}
.headerlogo
{
width: 368px;
height: 134px;
float: left;
clear: right;
margin: 5px;
position: absolute;
background-color: transparent;
}
.headermenu
{
width: 300px;
float: right;
margin: 5px;
padding: 59px 0px 59px 59px;
position: relative;
text-align: right;
}
.washingline
{
width: 793px;
height: 217px;
position: absolute;
top: 260px;
}
#hometext
{
position:absolute;
left:250px;
top:189px;
width:729px;
height:153px;
z-index:1;
}
Any help would be really appreciated as I am really flumoxed here. Best Justin I thought I had this issue resolved on Friday, but upon viewing my page in IE I realized that it isn't in the slightest. I have a .title style that is devoted to headings that have a bottom border and sometimes some text that right aligns which is encapsulated within <p></p> tags... This all looks fine and dandy when viewed in Firefox, but within IE I get no bottom border and the text within my <p></p> tags is at the very bottom of the page. Here is what I have so far: Code: .title { border-bottom: 1px solid #0033FF; position: relative; }
.title h1 {
color: #0033FF;
margin: 0px;
padding: 0px;
font-size: 1.6em;
font-weight: bold;
}
.title p {
margin: 0px;
position: absolute;
padding: 0px;
bottom: 0px;
right: 0px;
}
.title p A { color: #000; text-decoration: none; }
Code: <div class="title" align="left"> <p><a href="index.php?p=admin">Add News</a></p> <h1>News Updates:</h1> </div> If you look at the main menu(Home-About MCAEC-The Academy-Adult Education-Shining Star-Giving) on this page and hover over one of the parent categories you'll see issues with the positioning of the dropdown. I adjusted the margin and it looks fine in IE but the dropdown floats over the parent tabs in Firefox and Opera. Is there a way to adjust this so it's consistent in all browsers? Here's the code for the dropdown ul ul li a: Code: #dropmenu { z-index:100; position:relative;}
#dropmenu .menu ul ul {z-index:99; margin:0; width:160px; background:url(images/bg_sub.png) top left no-repeat !important; margin: 10px 0px 0px 0px ; position: absolute; display:none; padding-bottom:10px !important; clear:both; padding-top:13px;}
#dropmenu .menu ul ul li { line-height:inherit; height:auto; text-align:left; width:160px; text-align:left; line-height:1.69em;}
#dropmenu .menu ul ul li a{ font-weight: normal; color:#fff; font-size:13px; text-transform:none; }
#dropmenu .menu ul ul li a:hover { color:#edc951; font-weight:normal; }
Thanks Hi everyone, I have posted here [HTML Programming] because I'm not entirely sure what forum this particular problem should be put in. I have a fixed menu that I include using php. From looking at the source code I can see that it has definately included the menu. However IE only displays the menu 50% of the time. I have no idea why. At first I thought it was because I have a javascript animation for it to slide down, but I removed that and I still get the same problem. To see what I mean please visit twisted-reality.co.uk using IE and refresh a few times. Firefox, Opera, Safari and Netscape all display the menu fine, but IE feels like it needs to be different. I'm new to this forum but I hope someone can help Twisted-Daemon |
|||||||