|
CSS - Ap Elements Misaligned. Other Methods?
I am attempting to create a website for a hockey company, however I am at a loss with how to get the effects that I want. I am a novice web designer, and have tried so many different ways of coding this site. Frames, tables, and recently looked up a tutorial on slices in photoshop. My issue is that I am loading everything as an image and I'm afraid that my load time is going to be a lot more than it needs to be. Also, I can't get text and preview images to overlay the background where I want them to. I am trying to use AP elements, but since I have the website centered and the elements are an absolute value, depending on your window size the elements are misplaced. I am open to any and all suggestions as to how I should go about making this website while maintaining the style. I have a feeling I'm not going about this the most efficient way.
I tried posting a link to the site but apparently new users can't post URLS?? If you are willing to help me out I'd really appreciate it, let me know how to get you the address. Thanks in advance! Similar TutorialsI'm trying to learn CSS. I've taken great pains to get everything right. My pages all validate and they look correct on Firefox and mostly correct on Chrome. However IE is all over the place. If you view the below pages side by side on Firefox and IE, the following occur (in order of importance): - the top main box is pushed below where the left boxes end - the upper-right drop-down stuff is totally off in the weeds (Chrome also looks like IE) - "Recipes" tab isn't borderless on the bottom edge - left boxes are the wrong size and push "Clear List" out of bounds - search button is off in relation to search box mcrackan.com/recipes/csstest.htm mcrackan.com/recipes/css/default.css (Sorry about the non-links. I'm apparently not allowed to post click-able links yet.) Can anyone point me in the right direction for whatever I'm doing wrong? - Dinah We are now inching towards a final page. Something happened at the top of the page though; the photo of me used to be closer to the banner jpg and the text Photographs by award winning film sound editor Michael Redbourn used to be to the right of it. There is an image here which might better explain what I mean.. //i43.tinypic.com/347csua.png Page code is here .. //paste.pocoo.org/show/207983/ Second problem is that the menu at the bottom was centered until I added top and bottom margins after which it moved to the left. Thanks for the ongoing help, Mike Hello, My header (please click here ) looks good on IE7 but not on FF and IE6 Hello, What's wrong with my logo? I have created the logo with no white background but seems like it has , thus my css behind this? default.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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/comersus.css" type="text/css" rel="stylesheet" /> <title>Untitled Document</title> </head> <body> <div id="header_top"> <!--begin of header_top--> <img class="bck_green" src="images/bck_green.jpg" alt=""/> <img class="bck_dark" src="images/bck_dark.jpg" alt=""/> <img class="um_logo" src="images/um_logo.jpg" alt=""/> </div> </body> </html> css Code: #header_top {
width:721px;
height:116px;
}
.um_logo {
position:absolute;
float:left;
z-index:1;
background:url(../images/um_logo.jpg);
width:93;
height:90;
}
.bck_green {
float:left;
background:url(../images/bck_green.jpg) repeat-x;
width:337px;
height:116px;
}
.bck_dark{
float:right;
background:url(../images/bck_dark.jpg) repeat-x;
width:383px;
height:116px;
}
-sorry this is photoshop related , link is not accessible anymore Hi, I made an intranet webpage using PHP, MySQL, some JavaScript (collapsible 'windows') and CSS. In IE8 it looks like the image on the left. In Firefox 3.6 it looks like the image on the right. The rows are actually separate div elements, with tables inside them; this seemed to be the only way I could get the collapsible animation script to work without error. Without subjecting myself to the humiliating scrutiny of my appalling coding, is there any obvious tip towards making the table on the left appear a little more like the table on the right? The reason why I want to use IE8 to view this page is, in part, to take advantage of its ability to link to folders on the file system - something that Firefox cannot do (at least not without some customizing). I hope that makes sense and, as always, any help appreciated. Do any questions get answered here? How would I get a simple input form to align with a submit button? You can see the problem at: bit.ly/ovFGhR The CSS txt file: bit.ly/nMyP45 My CSS I think is telling the input text box to be a part of the paragraph above and the button sits below, misaligned. Please help!! My form's Submit and Reset buttons are centered and aligned properly in Firefox and Opera, but ,of course, look ridiculous in Internet Exploder 7 - aligned center, but stacked vertically with the Submit button on top of the Reset. My form markup is below - can you tell me how to apply correct CSS to make my buttons behave in IE? If it matters, keep in mind that my form appears in the page's center column. The left column is floated left and the right column is floated right. Code:
<div id="directory">
.
<ul>
<li>
<input class=\"submit\" name=\"submitButton\" type=\"submit\" value=\"Let's see 'em\" />
<input class=\"submit\" type=\"reset\" value=\"Clear the Form\" />
</li>
</ul>
.
</div>
and here's the applicable styling already in place:
#directory fieldset {
margin:1.5em 0 0 0; padding:0;
}
#directory legend {
margin:0;
padding-left:15px;
font-weight:bold;
}
#directory fieldset ul {
list-style-type: none;
padding: 1em 1em 0 1em;
}
#directory fieldset ul li {
padding-bottom: 1em;
}
Hi, Hope someone here can help me, having trouble with IE - there's a surprise! - and block elements, more specifically <p> and <ul>. As you can see from he http://dvxl.servehttp.com/Sites/Development/InfoCAP/Sites/dynamic/ .. the first line of the top paragraph has a larger line height than the rest, same with the top <li> of the <ul>. The xhtml is empty of styles, and the only styles applied to these elements a Code:
#main_content p {
margin-top: 0px;
margin-bottom: 15px;
color: #306EB1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
text-align: justify;
text-justify: newspaper;
}
#main_content ul li {
color: #306EB1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
list-style-type: square;
}
#main_content li {
line-height: 15px;
}
In Firefox the line heights are consistant, am I missing something? Thanks Hello all I have a page that uses css for the layout. The issue that I can not figure out how to fix is when someone re-sizes their browser the page content is all resized. How would I lock th positions of each span on the page so even if they resize (smaller) the browser the span's will stay where they are when the page is fully maximized on the users screen? I hope it is clear what I am asking. I tried puttin like a float tag but that does not work at all. Thanks all Jason I am at a total loss on this one. I'm trying to create a simple inline unordered list menu - no problems there - I've done that plenty of times. However, this time I would like my menu to have a border around it instead of being a plain box. As soon as I add the 'border-style:solid' modifier to the div, the text misaligns straight down, roughly 15px lines, out of the box. This happens on Firefox (and apparently on Opera as well, though I haven't checked that one myself). At this point I've stripped the page to bare bones, switched from transitional to strict, tried float vs not, tried margins vs 0 margins, and padding vs 0 padding, relative vs absolute, and attempted to manually shift the text through negative positions as well. No joy. Css: Code: /* Navigation */
#nav {
width: 821px;
height: 18px;
border: 1px;
border-style: solid;
border-color:red;
}
#nav ul {
}
#nav li {
display:inline;
float:left;
background-color:#9E0C0C;
text-align:center;
color:white;
font-family: arial, san-serif;
font-size: 14px;
font-variant: small-caps;
}
and page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" > <link href="style.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div id="nav"> <ul> <li>Home</li> <li>XXX</li> <li>XXX</li> <li>CCC</li> <li>HHH</li> <li>JJJ</li> <li>kkk</li> <li>KKK</li> </ul> </div> </body> </html> (As I said, I've stripped it to absolutely nothing else.) Any suggestions would be welcome. (ETA: Also tried changing text size in case a too-large font size was making the text 'pop out' of the box. That is also not it.) Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! I'm making a webpage for myself, and am coding to current Transitional XHTML and CSS standards. I'm using Firefox 0.9.2 for viewing the page. The problem I'm having is with adding a class to a <td> element and getting it to work correctly in IE 6. The CSS class I'm using for the <td> element is as follows: Code: .w3type{color: black; background-color: #FFCE6B;}
Code: .w3type:hover{color: white; background-color: red; background-image: url(images/mrgreen.gif); background-repeat: no-repeat; background-position: right;}
I add this class to a <td> tag: Code: <td class="w3type"> and when i view it in FF, the text and background work correctly, changing color and adding a little image to the right when I hover my mouse over it. The problem is that when I go to view the code in action with IE 6, neither the background nor the image will appear on hover. Is this a problem with IE, or my code? If you want to see the code on my site, here's the link. The css formatting in question is on the lower left corner of the page (the W3C webbadges). Thanks for any help Firstly, I'd like to say that I've been browsing this forum for a while now, as well as sites such as w3schools, and I've found it all to be very helpful. But now I have a situation that I haven't been able to solve on my own. Essentially, I want to make a clear and simple CSS-based layout that will work across browsers and platforms. I use a Mac myself, and it's difficult for me to check for problems with Internet Explorer. The problem I'm currently having concerns layout and positioning. Here's a link to the splash page I'm working on for a student organization: http://individual.utoronto.ca/ghp/fasu2006/ Before I make the full site I want to work out layout troubles I've been having. I got on a PC and the text when viewed with IE did not seem to properly align within the opaque white box I made for it. I've been feeling a little overwhelmed with concepts of absolute vs. relative positioning, unit values such as percents, px, em, and making use of things like padding, margins etc. and I'm hoping I can get some advice. So in one sentence, here is my question: How can I position elements (text, divs, images, anything) on the screen using CSS in an efficient way that will produce a similar result in different browsers? Here is the code that I think is relevant: Code: p {font-size: .75em; font-weight: bold; margin-left: 12em;
margin-top: 8em;}
#content {margin-top: 10px; margin-bottom: 10px;
margin-right: auto; margin-left: 3em;
width: 800px; padding: 20px;
background: transparent;}
#overlayback {position: absolute; top: 8em;
left: 15em; width: 250px; height: 250px;
z-index: 0;
filter: alpha(opacity=80); opacity: .80;
background: #FFF;}
#overlaytext {position: absolute; top: 3em;
left: 15em; z-index: 1;}
h1 {font-size: 6em; margin-left: .1em;
margin-top: .75em;}
h2 {font-size: 1em; font-weight: normal;
margin-left: 9em; margin-top: -4.5em}
</style>
</head>
<body>
<div id="content"><img src="images/tower.gif" width="297" height="422" alt="tower">
<div id="overlayback"></div>
<div id="overlaytext"><h1>fasu</h1>
<h2>2006-2007</h2>
<p>coming soon</p></div>
</div>
I hope I've been clear and thanks in advance for any advice. It's very much appreciated. hello everyone, 'tis my frist post... Just had'a quick question I'm working on a page, and l'm trying to create a text input with a background image, that has NO border, so that it nests inside of a table cell with no excess fluff. However the input has a 1 pixel high "line" that spans across the top of the element, and a 1 pixel high "line" across the bottom as well. I can't seem to get rid of it, is it possible? here's the code, l was trying to get to work with this: Code:
<HTML>
<HEAD>
<style>
/*Left searchBar Cap*/
td.leftCap{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x1.gif');
background-position: 0px 0px;
width: 28;
height: 50;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*right searchBar Cap*/
td.rightCap{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x3.gif');
background-position: 0px 0px;
width: 34;
height: 50;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*searchBar Top bar*/
td.searchTop{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x2.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
width: 425;
height: 16;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*searchBar Bottom*/
td.searchBottom{
background-color: #c0c0c0;
background-image: url('images/searchBar_3x1.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
width: 425;
height: 15;
}
/*center of searchBar*/
td.searchCen{
background-color: limegreen;
background-position: 0px 0px;
width: 425;
height: 19;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
BODY {
background-color: #c0c0c0;
background-attachment: scroll;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
}
/*input*/
.input {
background-image: url('images/searchBar_2x1.gif');
color: #191919
border-width: 0px;
padding: 0px;
border-style: hidden;
border: 0;
border-top-width: 0px;
border-bottom-width: 0px;
font-family: Comic Sans MS (cursive);
font-weight: extra-bold;
font-size: 10pt;
width: 425;
height: 19;
}
</style>
</HEAD>
<BODY>
<center>
<form>
<table cellpadding="0" cellspacing="0">
<tr><td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="leftCap">
</table>
<td>
<table bgcolor="#c0c0c0" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="searchTop">
<tr>
<td class="searchCen">
<input type="text" size="40" class="input" value="search google ... ">
<tr><td class="searchBottom">
</table>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="rightCap">
</table>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#c0c0c0" align="center">
<a onClick="javascript:searchGoogle();" href="#">
<img border="0" src="images/searchBar_1x4.gif" width="113" height="50"></a>
</table></table>
</form>
<script>
query = document.forms[0].elements[0].value;
function searchGoogle(){
if(query){
url = "http://www.google.com/search?hl=en&lr=&q="+query+"&btnG=Search";
window.open(url);
}}
</script>
</BODY>
</HTML>
Thanks for your help! Samantha G. Interesting situation i have. In my css i have this declared Code: css
a:link, a:visited { color: #c97c0f; text-decoration: none; font-weight: bold; }
a:active, a:hover { color: #82581d; text-decoration: underline; }
div#buenprov_content a:link, a:visited { color: #644e14; text-decoration: none; font-weight: bold; }
div#buenprov_content a:hover { color: #35290a; text-decoration: underline; }
For a change, IE displays the link colors correctly, the ones inside the div with the id buenprov_content have the color i want them to, and the rest of the page has the ones that are global. However, in firefox, they all inherit the traits from the #buenprov_content Even links not inside divs with that ID.... as shown: Here ( The ones in the fading content should be a different color ) Im building that site for a restaurant...but anyways, im a bit stumped as to why FF is doing this...any help? Thanks. Hi guys, I don't know if this is possible.. I have a table with position: fixed and width: 100% height: 100% so it covers the entire screen. There is text behind it, you can see through the table and there is text back there. My problem is you can't click on anything in the background, behind the table. You can't select the text and you can't click the links because the table is blocking them. So my question is it possible to click through the table element on the links in the background and stuff? http://perfbase.com/beta/tablesector/v7/ I tried setting the middle td to visibility: hidden and display: none but that didn't work. I tried javascript events but click, mousedown, mouseover, none of them work for the text in the background. Thanks a lot! Hi everyone Hoping someone can help with a niggly problem. My site is working great in Mozilla but I'm getting a gap between two divs in IE6 and Opera 7. Compare the following in IE6, Opera 7 and Mozilla and see the gap below both the 'welcome' and 'latest' graphics: http://www.crashingbydesign.com.au/newsite/ The relevant code is as follows: Code:
<div id="content_container">
<div id="belowbg">
<div id="left">
<div id="h3lft">
<h3>Welcome</h3>
</div>
<div id="contentlft">
<p>Lorem ipsum ...</p>
</div>
<div id="footlft"></div>
</div>
<div id="right">
<div id="h3rght">
<h3>Latest</h3>
</div>
<div id="contentrght">
<p>Lorem ipsum ...</p>
</div>
<div id="footrght"></div>
</div>
</div>
<div id="footer">
<p>text</p>
</div>
</div>
The relevant CSS is as follows: Code:
#content_container {
position: absolute;
top: 406px;
left: 50%;
margin: 0 0 0 -372px;
width: 742px;
height: auto;
z-index: 10;
}
#belowbg {
padding: 0 11px 11px 11px;
width: 720px;
height: auto;
background-color: #313131;
}
/*hack to ensure that Mozilla encloses the floats with the #belowbg div*/
#belowbg:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#left {
float: left;
width: 481px;
height: auto;
padding: 0;
margin: -25px 0 0 0;
}
#h3lft {
width: 481px;
height: 25px;
background: url(images/welcomehd.gif) no-repeat;
text-indent: -9000px;
display: block;
position: relative;
margin: 0;
padding: 0;
}
#contentlft {
width: 459px;
height: auto;
background-color: #293942;
border: 1px solid #636B73;
margin: -1px 0 0 0;
padding: 10px 10px 0 10px;
font-size: 1.2em;
line-height: 1.6;
display: block;
}
#footlft {
width: 481px;
height: 20px;
margin: -1px 0 0 0;
background: url(images/welcomeft.gif) no-repeat;
display: block;
}
#right {
float: right;
width: 230px;
height: auto;
padding: 0;
margin: -25px 0 0 0;
}
#h3rght {
width: 230px;
height: 25px;
background: url(images/latesthd.gif) no-repeat;
text-indent: -9000px;
display: block;
position: relative;
margin: 0;
padding: 0;
}
#contentrght {
width: 208px;
height: auto;
background-color: #525252;
border: 1px solid #636B73;
margin: -1px 0 0 0;
padding: 10px 10px 0 10px;
font-size: 1.2em;
line-height: 1.6;
display: block;
}
#footrght {
width: 230px;
height: 20px;
margin: -1px 0 0 0;
background: url(images/latestft.gif) no-repeat;
display: block;
}
#footer {
position: relative;
top: 0;
left: 0;
width: 720px;
height: 188px;
padding: 20px 10px;
margin: 0;
background: url(images/btmhatlines.gif) right no-repeat;
font-size: 1.1em;
line-height: 1.6;
text-align: center;
}
Can anyone see my mistake? Cheers Hi all, after my last query it was suggested that my use of absolute positioning for every element was not necessary. I should go with the flow. So I copied a basic page structure and twiddled a little. Here is the result so far html link css link A couple of questions. 1. Would you say I'm on the right track, or should I be looking at a different style structure? 2. The page appears in ie to have gaps around the elements. In Mozilla it looks like I hoped it would look. How to close up gaps in ie. I'm trying padding, margin, negative values etc, Checking in the morning in hope of miraculous fix. No luck so far. Any help, advice appreciated. Thanks Solar.. Hi All, Still working on a site for a friend. www dot helenstow-cpsychol.co.uk/faqs dot html On this page, I want the scrolling '#content1' box to be about 200-250 pixels longer, but in making it longer it overlaps vertically with other elements on the page ('#nav1' etc) and displaces them. The way elements are placed relative to each other was designed by someone very kind on another forum. I find it quite confusing to be honest (Im a total newb.) and was wondering if this is the best way to do this or if there is a way of aligning elements by just specifying where on the page they should be without necessarily affecting the position of other elements? (Is this possible using z-index?) If this is possible, how might I go about it and is it a good or bad idea? (the guy who helped me previously appeared to be pretty smart, so I'm guessing there's a reason he laid things out the way he did) Here is my CSS: Code: * {
padding:0;
margin:0;
list-style-type:none;
}
.link1 a:link,.link1 a:visited,.link1 a:active {
color:#000000;
font-family:arial,helvetica,sans-serif;
font-weight:bold;
}
.link1 a:hover {
background-color:#000000;
text-decoration:none;
}
.link2 a:link,.link2 a:visited,.link2 a:active {
color:#00def5;
font-family:arial,helvetica,sans-serif;
font-size:16px;
font-weight:bold;
}
.link2 a:hover {
color:#fff;
background-color:#286d8c;
text-decoration: none;
}
.link3 a:link, {
color:#FFFFFF;
font-family:arial,helvetica,sans-serif;
font-size:24px;
font-weight:bold;
}
.link3 a:visited,.link3 a:active {
color:#42daf5;
font-family:arial,helvetica,sans-serif;
font-size:24px;
font-weight:bold;
}
.link3 a:hover {
color:#FFFFFF;
text-decoration: none;
}
body {
background-color:#000;
font-family:tahoma,arial,helvetica,sans-serif;
font-size:100%;
text-align: center;
}
h1 {
font:bold 20px tahoma,helvetica,arial,sans-serif;
color:#ffa507;
text-shadow:0 1px 1px #000;
text-align:center;
text-decoration:underline;
}
h2 {
font:bold 18px tahoma,helvetica,arial,sans-serif;
color:#ffff01;
text-shadow:0 1px 1px #000;
text-align:center;
text-decoration:underline;
}
h3 {
font:italic 16px tahoma,helvetica,arial,sans-serif;
color:#fff;
text-shadow: 0 1px 1px #000;
text-align: center;
}
h4 {
font:bold 16px tahoma,helvetica,arial,sans-serif;
color:#000;
text-shadow: 0 1px 1px #ffa507;
text-align:center;
text-decoration:underline;
}
h5 {
font:bold 16px tahoma,helvetica,arial,sans-serif;
color:#000;
text-align:center;
}
#container1 {
width:1008px;
height:1168px;
margin:auto;
background-image:url(../images/Alt-Pages-BG.jpg);
}
#content1 {
width:515px;
height:448px;
padding-top:20px;
padding-bottom:0px;
padding-right:5px;
padding-left:5px;
border:3px solid transparent;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:55px;
text-align:center;
overflow:auto;
}
#content2 {
width:900px;
height:20px;
border:3px solid transparent;
padding:0px 0px 0px 0px;
margin:185px 54px 0px 54px;
font-family:tahoma,arial,helvetica,sans-serif;
font-size:14px;
color:#fff;
text-align:center;
overflow:auto;
}
#content3 {
width:260px;
height:100px;
padding-top:0px;
padding-bottom:0px;
padding-right:15px;
padding-left:15px;
margin-top:20px;
margin-bottom:0px;
margin-right:110px;
margin-left:110px;
border:3px solid #000;
background-color:#fff;
font-family:tahoma,arial,helvetica,sans-serif;
font-size:14px;
color:#000;
text-align:center;
overflow:auto;
}
#content4 {
width:400px;
height:180px;
padding-top:0px;
padding-bottom:0px;
padding-right:15px;
padding-left:15px;
margin-top:20px;
margin-bottom:0px;
margin-right:0px;
margin-left:42px;
border:3px solid #000;
background-color:#fff;
font-family:tahoma,arial,helvetica,sans-serif;
font-size:14px;
color:#000;
text-align:center;
overflow:auto;
}
#nav1 {
margin-bottom:36px;
overflow:hidden;
}
#nav1 li {
margin-bottom:40px;
position:relative;
}
#li1a {margin-left:835px;}
#li1 {margin-left:761px;}
#li2 {margin-left:687px;}
#li3 {margin-left:613px;}
#li4 {margin-left:539px;}
#li5 {margin-left:465px;}
#li6 {margin-left:391px;}
#li7 {margin-left:28px;}
#li8 {margin-left:96px;}
#li9 {margin-left:90px;}
#li10 {margin-left:92px;}
#li11 {margin-left:332px;}
}
#nav1 a,#nav2 a {
position:relative;
display:block;
height:30px;
background-image:url(../images/Icons.jpg);
}
#nav1 span,#nav2 span {
position:absolute;
top:0;
left:0;
height:30px;
z-index:1;
background-image:url(../images/Icons.jpg);
cursor:pointer;
}
#home,#home span {
width:149px;
background-position:-835px -584px;
}
#about,#about span {
width:223px;
background-position:-761px -644px;
}
#appts,#appts span {
width:297px;
background-position:-687px -704px;
}
#fees,#fees span {
width:371px;
background-position:-613px -764px;
}
#faq,#faq span {
width:445px;
background-position:-539px -824px;
}
#links,#links span {
width:519px;
background-position:-465px -884px;
}
#blog,#blog span {
width:593px;
background-position:-391px -944px;
}
#home:hover span {
width:149px;
background-position:-835px -3px;
background-image:url(../images/Icons.jpg);
}
#about:hover span {
width:223px;
background-position:-761px -63px;
background-image:url(../images/Icons.jpg);
}
#appts:hover span {
width:297px;
background-position:-687px -123px;
background-image:url(../images/Icons.jpg);
}
#fees:hover span {
width:371px;
background-position:-613px -183px;
background-image:url(../images/Icons.jpg);
}
#faq:hover span {
width:445px;
background-position:-539px -243px;
background-image:url(../images/Icons.jpg);
}
#links:hover span {
width:519px;
background-position:-465px -303px;
background-image:url(../images/Icons.jpg);
}
#blog:hover span {
width:593px;
background-position:-391px -363px;
background-image:url(../images/Icons.jpg);
}
#nav2 li {
float:left;
display:inline;
position:relative;
}
#nav2 a {
height:124px;
}
#nav2 span {
height:124px;
}
#bps,#bps span {
width:131px;
background-position:-28px -1041px;
}
#hps,#hps span {
width:131px;
background-position:-180px -1041px;
}
#scp,#scp span {
width:131px;
background-position:-332px -1041px;
}
#pay,#pay span {
width:131px;
background-position:-484px -1041px;
}
#email,#email span {
width:131px;
background-position:-849px -1041px;
}
#bps:hover span {
width:131px;
background-position:-28px -460px;
background-image:url(../images/Icons.jpg);
}
#hps:hover span {
width:131px;
background-position:-180px -460px;
background-image:url(../images/Icons.jpg);
}
#scp:hover span {
width:131px;
background-position:-332px -460px;
background-image:url(../images/Icons.jpg);
}
#pay:hover span {
width:131px;
background-position:-484px -460px;
background-image:url(../images/Icons.jpg);
}
#email:hover span {
width:131px;
background-position:-849px -460px;
background-image:url(../images/Icons.jpg);
}
I'd also like to be able to move '#content1' down about 10 pixels from the top of the page (but when I add 10 pixels to the 'margin-top' it moves the background image for '#container1' down with it!? I would be incredibly grateful for any and all help. My very best wishes, Tom Hi Guys, I have a generic Question/Problem to do with a Block Element (in this case a div) in an li tag. This seems to be a problem in browsers like IE8 and Safari but not IE7 and the latest FireFox version. Where with the div item 'drops down' a line from the li bullet. Like this (. is the li): . Here is My Div Content I want it to be like this: . Here is My Div Content Now this only doesn't happen if I just have plan text between the div with no class, so I'm thinking that something in my css dragHandle class may be at fault. Either that or I need to add something to it to do with float or display: line or block etc? Any thoughts or ideas are most appriciated (note I'm using a div in an li as I'm using the AJAX reorder list control and need something for a 'drag handle' to select an item in the list. The reorderlist uses ul and li to display itslef to I have to use this markup structure). Here is my markup. <ul> <li> <div class="dragHandle"> </div> </li> </ul> DragHandle class is as follows .dragHandle { width: 20px; height: 25px; background-image: url(/styles/icons/selectarrow.JPG); background-position: center; background-repeat: no-repeat; cursor: move; } |
|||||||