|
CSS - Can't Center Properly In Ff And Ie
Alright.. I'm having a hard time trying to get this to work in the various browsers. Essentially what I'm doing is creating a navigational bar at the top, with one of the links containing a pure CSS drop down menu. Seems to work fine (in IE 6 and FF... need to test in IE7, NS, and Opera. I don't have IE7, so can't test there).
I have placed an image above the navigational bar as well. I'm trying to get the navbar centered on the page (can't seem to get it centered. I'm also trying to make the width of the navbar, say 700px or 80% or whatever.. but as long as it's centered in all the browsers... Any ideas on making this right, or even cleaning up the code? Thanks. Here's the code for the HTML: 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">
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="menu5.css" />
<style>
body {background-color:#fdeadc;
text-align:center;
.container {
background-image:url('images/navbar.jpg');
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
</style>
</head>
<body>
<div class="logo">
<img src="images/logo.jpg">
</div>
<div class="container clearfix">
<div class="navbar">
<ul class="menu5">
<li><a href="#">Home</a></li>
<li><a href="#">Company</a></li>
<li><a class="drop" href="#">Services<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Why Our Service</a></li>
<li><a href="#">Why Our Site</a></li>
<li><a href="#">How does it work</a></li>
<li><a href="#">Message Analysis</a></li>
<li><a href="#">Message Handling</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Trial</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Client Login</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS Code: Code:
/* commom style for all browsers */
.menu5 {
width:625px; margin:auto; text-align:left; position:relative; padding:0; list-style-type:none;
}
.menu5 ul {
padding:0; margin:0; list-style-type:none; /* for Firefox */
}
.menu5 li {
float:left; position:relative;
}
.menu5 li a, .menu5 li a:visited {
text-align: left; display:block; text-decoration:none; float:left; padding-right:1em; line-height:2.5em; height:2.5em; color:#dd0b14;
}
.menu5 li ul {
visibility:hidden; position:absolute; left:0; height:0; overflow:hidden;
}
.menu5 table {
margin:-1px; border-collapse:collapse; /* font size for IE5.5 */
}
/* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menu5 li:hover a,
.menu5 li a:hover {
text-decoration:underline; border:0; color:#dd0b14;
}
.menu5 li:hover ul,
.menu5 li a:hover ul {
visibility:visible; height:auto; background:#fff; border:1px solid #ddd; left:0; top:2.5em; overflow:visible;
}
.menu5 li:hover ul li a,
.menu5 li a:hover ul li a {
display:block; font-weight:normal; background:transparent; text-decoration:none; height:auto; line-height:1em; padding:0.5em;
}
* html .menu5 li a:hover ul li a {
width:10em; w\idth:9em; /* hack for IE5.5 */
}
.menu5 li:hover ul li ul,
.menu5 li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; overflow:hidden;
}
.menu5 li:hover ul li a:hover,
.menu5 li a:hover ul li a:hover {
text-decoration:underline;
}
.menu5 li:hover ul li:hover ul,
.menu5 li a:hover ul li a:hover ul {
visibility:visible; border:1px solid #ddd; height:auto; background:#fff;
}
.menu5 li:hover ul li:hover ul li a,
.menu5 li a:hover ul li a:hover ul li a {
display:block; height:auto;
}
.menu5 li:hover ul li:hover ul li:hover a,
.menu5 li a:hover ul li a:hover ul li a:hover {
text-decoration:underline;
}
Similar TutorialsI am using the following code how do I change it so that it would show up in the center of the brower window? Thanks Tim PHP Code: <div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\"> <object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0 ,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\"> <param name=\"allowScriptAccess\" value=\"sameDomain\" /> <param name=\"movie\" value=\"ads/cardio3.swf\" /> <param name=\"loop\" value=\"false\" /> <param name=\"quality\" value=\"high\" /> <param name=\"wmode\" value=\"transparent\" /> <param name=\"bgcolor\" value=\"#ffffff\" /> <embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\" bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" /> </object> </div> Something I think I'm not doing. I'm using something called niftyCorners and thought that was what was cauing the problem, but now I'm not so sure. I am trying to have this appear on a webpage for the reader to use: <script language="JavaScript"> <!-- alert("Sample JavaScript alert box 1."); alert("Sample JavaScript alert box 2"); alert("There you go, alert boxes \nTa da, and one with a new line!"); // --> </script> Now, I need to have the <pre> tag nested inside a div tag, but this doesn't validate. So, I nested the code tag inside the pre tag and it breaks my layout in IE 6.0. Why am I nesting at all? niftyCorners doesn't work very well when you put padding or margin on any div you want to have rounded corners. So, I'm trying to put a div round my pre tag, so I can round the div and I can use the pre tag to control margin/padding. If anyone has any ideas, I'd appreciate it. Hi. Having some trouble with IE (as per usual) and css. I have a container with the id "text". On a normal page, the styling for an unordered list is to use my own bullet point image and have a margin of 20px (as IE sees fit to hide the bullets off the left edge). However, on my sitemap page, inside the text div, there is a div called sitemap and I have written the style of ul's in this div to have no list-style. Of course in ff and opera this works fine and the lists have no style, but IE persists in using the bullet image. It seems like it's taking the rule: div#text ul { list-style: url(blah blah blah) etc. } to be the only ul styling rule, and anything which contradicts it is ignored: div#text div#sitemap ul { list-style: none; } Any help would be greatly appreciated, Thanks UPDATE: Just fixed it, still haven't a clue as to why it's happening tho. What I did was to say: div#text div#sitemap ul { list-style: url(); } Can anyone enlighten me as to the cause? I am working on this website babeside dot be Everything is going as I want it in all browsers, except IE. When opening the website in IE, and selecting a babe, the babe-part is shown waaaaay underneath all the other parts of the site. Can anyone help me how to fix this? Hi. Any help would be appreciated. I am trying to cut down on my image sizes on my website: http://toptiertemplates.com, but i am having a few difficulties. I have this table which was created in photoshop which is off to the side. I would like to take just a slice of the table and repeat the image the full length of the table's original length. The page is written by placing everything with divs. I know how to set the image as a background and all and repeat it, however, when i do so, it replaces my website's background and just shows up as a white space. So i am wondering if I have to use layers of some sort or anything else. I'd appreciate some help. Thanks. http://s125392025.websitehome.co.uk/layout.html I'm making a layout, in this layout(as you can see), I have a SubNav and a main body part. Both of those sections, have a header image and a footer image. Well, my body footer image isn't aligning directly with the main body. It's off by about 1 or 2px. I tried using: position:absolute; With a few different types of top, and bottom, but the picture only dissappears. I used the exact same line code for the footer image for the subnav, and it has aligned just fine. Here's the script if it matters. Could anyone help please? PHP Code: <!DOCTYPE html PUBLIC> <html> <head> <title>2 Box Layout Test</title> <style type="text/css" media="screen"> /* Here is the main CSS */ body { background: #FFFFFF; } div { background: #FFFFFF; } h5 { text-align:center; } #mid, #left { top:120px; } #midcontainer { width:400px; margin:0 auto; position:relative; left:35px; top:44px; } #midheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head400.jpg) top left no-repeat;height:30px;z-index:-1; } #midfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot400.jpg) top left no-repeat; height:30px; } #leftheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head200.jpg) top left no-repeat;height:30px; } #leftfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot200.jpg) top left no-repeat;height:30px; } #midbody, #topbody, #leftbody { border:1px solid black;background: #a3a3a3; } p.top1 { text-align:center; } p.midheadtxt { font-weight:bold; text-align:center; position: absolute; top:-5px; left:180px; } p.leftheadtxt { font-weight:bold; text-align:center; position: absolute; top:-5px; left:50px; } #leftcontainer { width:200px; position:absolute; left:5px; top:150px; } </style> </head> <body> <!--This is the main site header properties--> <div id="top"> <div id="topbody"> <h5>Main Site Header</h5> <p class="top1">This is where the main image, and TopNav will go.</p> </div> </div> <!--This is where the main body text goes for the page--> <div id="mid"> <div id="midcontainer"> <div id="midheader"> <p class="midheadtxt">News</p> </div> <div id="midbody"> <h5>Middle</h5> <p>This is where the main section of the site is located.</p> </div> <div id="midfoot"> </div> </div> </div> <!--This is the subnav area--> <div id="left"> <div id="leftcontainer"> <div id="leftheader"> <p class="leftheadtxt">Sub-Navigation</p> </div> <div id="leftbody"> <p>This is where the subnav is located.</p> </div> <div id="leftfoot"> </div> </div> </div> </body> </html> Please help! I've got two rounded boxes one is contained in the other. If the innerbox grows, the outer box should grow with it. Firefox does a great job and grows with it but IE7 doesn't grow, any help would be greatly appreciated. here's the CSS i've used for IE: Code: /* first rounded box */
/* images are set in the index.php */
/* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 14px;
font-size: 1px;
}
/*.rbroundbox { width: 60em; margin: auto; background-color: #37a5f0;} */
.rbroundbox { position: absolute; top: 15px; width: 800px; margin: 5em 0 0 2em; background-color: #37a5f0; }
.rbcontent { margin: 0 14px; min-height: 570px; height: 100%; }
/* EOF first rounded box */
/* second rounded box */
/* images are set in the index.php */
/* height and width details */
.rbtop2 div, .rbtop2, .rbbot2 div, .rbbot2 {
width: 100%;
height: 24px;
font-size: 1px;
}
/*.rbroundbox { width: 60em; margin: auto; }*/
.rbroundbox2 { position: absolute; top: 5px; width: 577px; margin: 9.5em 0 0 12em; background-color: #9cd5f0;}
.rbcontent2 { margin: 0 14px; min-height: 375px; }
/* EOF second rounded box */
here's the html i've used: Code: <body>
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
<div class="rbroundbox2">
<div class="rbtop2"><div></div></div>
<div class="rbcontent2">
<p><?=$content?></p>
</div><!-- /rbcontent2 -->
<div class="rbbot2"><div></div></div>
</div><!-- /rbroundbox2 -->
</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div>
<!-- /rbroundbox -->
</body>
Surprise, surprise... [edit]link removed...[/edit] In FF the list of links that represent the toon archive are dispayed as two columns just like I want, but IE isn't performing properly, showing it as one list right under the other... [note] The CSS is in the head, I haven't exported to a seperate file sheet yet since it's still in development. [/note] I'm confused as to what's causing this... http://www.houndsandme.com/ It looks great in FireFox of course... but in IE6 the #column div is longer than it's supposed to be so that the background of the inner elements doesn't cover it all the way. It's almost like either the padding of the #column div, or the margin of the inner div (but only the last one) is incorrect... Also, have a look at IE7 for some really strange happenings... Make sure you scroll over the nav links Hi there, I'm trying to get the images from each page to be centered in their td's, which appears to work fine in FF, but not in IE. Any help is greatly appreciated. here's the css; Code:
.borders {
border: 1px solid #666666;
text-align:left;
font-family:Century Gothic, Arial, sans-serif;
font-size:11px;
align:center;
}
}
.text {
font-family:Century Gothic, Arial, sans-serif;
font-size: 11px;
color: #333333;
text-align:center;
}
}
.listtext {
font-family:Century Gothic, Arial, sans-serif;
font-size: 11px;
color: #333333;
text-align:left;
border: 1px solid #666666;
}
table.menu {
border:1px solid #999999;
background:#CCCCCC;
align:center;
}
table.menu a:link, table.menu a:visited {
display:block;
font-family:Century Gothic, Arial, sans-serif;
font-size:12px;
line-height:16px;
color:#006600;
text-decoration:none;
padding: 2px 2px;
}
table.menu a:active, table.menu a:hover {
color:#CCCCCC;
background:#006600;
}
table.menu a {
width:144px;
display:block;
font-family:Century Gothic, Arial, sans-serif;
font-size:12px;
line-height:16px;
color:#006600;
text-decoration:none;
padding: 2px 2px;
}
.GPlink {
font-famil:Century Gothic, Arial, sans-serif;
font-size:10px;
color:#000000;
}
.GPlink a {
font-family:Century Gothic, Arial, sans-serif;
font-size:10px;
align:center;
color:#333333;
}
.pagetitletext {
font-family:Century Gothic, Arial, sans-serif;
font-size:13px;
align:left;
color:#006600;
font-weight:bold;
}
.piccenterind
{width: 212px; margin-left: auto; margin-right: auto;}
.piccentercont
{width: 322; margin-left: auto; margin-right: auto;}
and the html; Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Kyrtsakas Law - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Kyrtsakas Law Office - Title Insurance from an experienced Real Estate Lawyer offers the best protection for your investment">
<meta name="keywords" content="Kyrtsakas, Law, Law Office, Lawyer, real estate, estate, will, title, Windsor, purchases, mortgages, power of attorney, attorney, CAW">
<link href="kyrtsakas_styles.css" rel="stylesheet" type="text/css">
</head>
<body topmargin="0" bgcolor="#666666">
<table width="640" align="center" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC" class="menu">
<tr valign="top">
<td align="center" width="640" colspan="6">
<img src="images/Kyrtsakas_Header.jpg" alt="Kyrtsakas Law Office" name="header" id="header">
</td>
</tr>
<tr valign="top">
<td class="borders" width="106" colspan="1">
</td>
<td class="borders" width="106" colspan="1">
<a href="http://www.kyrtsakaslaw.com">Home</a>
</td>
<td class="borders" width="106" colspan="1">
<a href="http://www.kyrtsakaslaw.com/profile.htm">Profile</a>
</td>
<td class="borders" width="106" colspan="1">
<a href="http://www.kyrtsakaslaw.com/tools.htm">Online Tools</a>
</td>
<td class="borders" width="106" colspan="1">
<a href="http://www.kyrtsakaslaw.com/contact.htm">Contact</a>
</td>
<td class="borders" width="106" colspan="1">
</td>
</tr>
<tr valign="top">
<td class="borders" width="106" colspan="1">
</td>
<td width="212" colspan="2" class="borders">
<br>
<div class="pagetitletext">Home</div><br>
Welcome to <b>Kyrtsakas Law Office</b>.<br><br>
<b>Christos Kyrtsakas</b>, <b>L L .B.</b><br><br>
"For Nineteen years I have practiced law with an emphasis on <b>Real Estate</b>, including <b>Purchases, Sales, Mortgages</b>,
and <b>Estate Law</b>, including <b>Wills, Powers of Attorney, and Probate</b>."<br><br>
Call me today at (519)-974-6303 for an appointment to discuss your particular needs.<br><br>
CAW Plan Welcome!<br><br>
"<i>Having a Lawyer Makes it Safer for You</i>!"<br><br>
</td>
<td colspan="2" width="212">
<div class="piccenterind"><img src="images/Kyrtsakas_sign_sm.jpg"></div>
</td>
<td class="borders" width="106" colspan="1">
</td>
</tr>
<tr valign="top">
<td class="borders" width="106" colspan="1">
</td>
<td class="borders" width="428" colspan="4">
</td>
<td class="borders" width="106" colspan="1">
</td>
</tr>
</table>
<table bgcolor="#CCCCCC" align="center" width="640">
<tr>
<td align="center" class="GPlink" colspan="6">
website designed & maintained by <a href="http://www.graphixplus.com" target="_blank">Graphix Plus Web Development</a> - 2005
</td>
</tr>
</table>
</body>
</html>
So basically here's the problem.... I'm using a jquery folder tree. By default, there is a plus and minus sign designating expanded or collapsed. If you click the sign only, would the menu expand/collapse. However, for my needs, I need the entire name beside the sign to be clickable as well. So I adjusted certain items and it works... in Opera, Firefox, Safari, Flock, and Chrome... (All latest versions I just downloaded today). It doesn't, however, work in IE6 (yes.. I still use IE6). Have not tested in IE7 or IE8... I posted this in the CSS forum as it seems as though it's a CSS problem as opposed to Javascript or PHP... Anyways... here's the CSS file: Code:
.treeview, .treeview ul {
padding: 0;
margin: 0;
list-style: none;
}
.treeview ul {
background-color: white;
margin-top: 4px;
}
.treeview .hitarea {
background: url(images/treeview-default.gif) -64px -25px no-repeat;
height: 16px;
width: 100px;
margin-left: -16px;
float: left;
cursor: pointer;
}
/* fix for IE6 */
* html .hitarea {
display: inline;
float:none;
}
.treeview li {
margin: 0;
padding: 3px 0pt 3px 16px;
}
.treeview a.selected {
background-color: #eee;
}
#treecontrol { margin: 1em 0; display: none; }
.treeview .hover { color: red; cursor: pointer; }
.treeview li { background: url(images/treeview-default-line.gif) 0 0 no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }
.treeview .expandable-hitarea { background-position: -80px -3px; }
.treeview li.last { background-position: 0 -176px }
.treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(images/treeview-default.gif); }
.treeview li.lastCollapsable { background-position: 0 -111px }
.treeview li.lastExpandable { background-position: -32px -67px }
.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }
.treeview-red li { background-image: url(images/treeview-red-line.gif); }
.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(images/treeview-red.gif); }
.treeview-black li { background-image: url(images/treeview-black-line.gif); }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(images/treeview-black.gif); }
.treeview-gray li { background-image: url(images/treeview-gray-line.gif); }
.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(images/treeview-gray.gif); }
.treeview-famfamfam li { background-image: url(images/treeview-famfamfam-line.gif); }
.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(images/treeview-famfamfam.gif); }
.filetree li { padding: 3px 0 2px 16px; }
.filetree span.folder, .filetree span.file { padding: 1px 0 1px 16px; display: block; }
.filetree span.folder { background: url(images/folder.gif) 0 0 no-repeat; }
.filetree li.expandable span.folder { background: url(images/folder-closed.gif) 0 0 no-repeat; }
.filetree span.file { background: url(images/file.gif) 0 0 no-repeat; }
Here's the relevant nav menu code: Code:
if (mysql_num_rows($result) != '0') {
while($row = mysql_fetch_array($result)) {
$string5= $row['string'];
$state3 = $row['state'];
$county3 = $row['county'];
$city3 = $row['city'];
$item3 = $row['item'];
if ($state2 != $state3) {
if ($i != 1) {
$treeview .= "</ul></li></ul></li></ul></li>";
}
$i++;
$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a></div><br />";
$state2 = $state3;
$j = 1;
}
if ($county2 != $county3) {
if ($j != 1) {
$treeview .= "</ul></li></ul></li></ul>";
}
$j++;
$treeview .= "<ul style=\"display:none;\">";
$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a></div><br />";
$county2 = $county3;
}
if ($city2 != $city3) {
$treeview .= "<ul style=\"display:none;\">";
$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a></div><br />";
$city2 = $city3;
$treeview .= "<ul style=\"display:none;\">";
}
if ($item3) {
$treeview .= "<li>".$item3."</li>";
$item2 = $item3;
}
}
}
$treeview .= "</ul></li></ul></li></ul></li></ul>";
There are 3 lines of code that I have changed from when it works: Code: $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a></div><br />"; $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a></div><br />"; $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a></div><br />"; From the above 3 lines, the only thing I did which seemed to break the code was move the </div> from in front of <a href ...> to after </a> So the original lines (where it worked) looked like: Code: $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a><br />"; $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a><br />"; $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a><br />"; EDIT: Ok... so not everything works in the other browsers either. Basically if I hit refresh with the new code, then collapse and expand seem to work in reverse.... So not sure how to correct this, but any help would be appreciated... Here is what it looks like (Screen shots): Working Properly in FF After a refresh in Firefox (This is after hitting collapse) Working Properly in IE6 (Before making the changes mentioned above) Not Working in IE6 The site is not currently accessible which is why I'm including screen shots. However, if you need to see them, let me know and I will make it live.... Heading out now, so was trying to get a post up at least before I left... Thanks.. if you need further information or additional code, let me know. Any help would, of course, be appreciated. Hi, I'm having an issue with the image not laying out properly. Please go here http://sixtwentyfour.com/ See how "November's Issue" is overlapping my paragraph background? I want it contained within the paragraphs, not outside. Could someone please point out what I'm doing incorrectly or otherwise lead me in the right direction? Thanks. This code for my horizontal drop down menu works great in Chrome & Firefox but is shifted to the right in IE. I would like it to line up properly, like it does in Firefox & Chrome. Anyone have any ideas on how to make it IE compatible? Thanks! Here is the test webpage to see it live: artevaggio.com/test/slideshow_sample.html Here is the CSS source: artevaggio.com/test/artevaggio_style.css There also a snippet of CSS when you view the page source code. Thanks! I'm working on a website that I'm having issues with in the CSS. I'm fairly new to CSS and I don't know how to get an image banner to show up next to each other. I though with the css in place I could do that, but some how I'm missing where the nav drops down in to the next div which is suppose to be a slideshow type div. The page is at ukindesigns.com/EBB/ebb.html and the style sheet can be found at ukindesigns.com/EBB/CSS/style.css Thanks, Franky I am just muddling through tweaking my weblog at the mo - learning as I go. But I have come accross something that I just can't pinpoint the solution for. I was hoping someone here could look at it with a fresh [and more knowledgeable] perspective. I have been googling, reading, researching, experimenting and generally pulling my hair out for about 12 hours now and am still no closer. The problem is that I have a div (with the id of "left bar") which I would like to sit on the left hand side of my page. It displays perfectly in firefox but in IE the whole section sits to the extreme right. Here is the link to the SITE Here is a link to some SCREENSHOTS The code:CSS Code:
/*left bar */
#left_bar {
float: left;
position: absolute;
padding-left: 2px;
margin: 160px 12em 0px 0px;
width: 200px;
display: inline;
}
#left_bar ul {
color: #336666;
font-weight: bold;
text-transform: lowercase;
list-style-type: none;
margin: 0;
padding-left: 1px;
}
#left_bar ul li {
font: italic normal 100% 'Times New Roman', Times, serif;
text-align: right;
letter-spacing: 0.1em;
margin-top: 10%;
margin-right: 10%;
float: none;
padding-bottom: 2px;
}
#left_bar ul ul {
font-variant: normal;
font-weight: normal;
line-height: 100%;
text-align: left;
list-style-type: none;
margin: 0;
padding: 0;
}
#left_bar ul ul li {
font: normal normal 70%/115% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
letter-spacing: 1px;
border: 0;
margin-top: 0;
padding: 0;
padding-left: 8px;
}
#left_bar ul ul li a {
color: #996699;
text-decoration: none;
}
#left_bar ul ul li a:hover {
border-bottom: 1px solid #660066;
}
The code: html Code: <div id="left_bar"> <ul> <li id="calendar"> <?php require( dirname(__FILE__).'/_calendar.php' ); ?> </li> </ul> <ul> <li> <?php require( dirname(__FILE__).'/pophis.php' ); ?> </li> </ul> <br /> <ul> <li> <ul> <li> <?php require( dirname(__FILE__).'/misc.php' ); ?> </li> </ul> </li> </ul> </div> Any thoughts, help, suggestions..... anything...... would be v much appreciated! Hey everyone, I am working on a design for a friend. and I got it almost done, but for some reason, the footer does not display below the page. In no browser. Here is my code: 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" lang="en">
<head>
<title>BlackNine</title>
<script type="text/JavaScript" src="rounded_corners_lite.inc.js"></script>
<style type="text/css">
body {
background-color: #4D4D4D;
color: #FFFFFF;
font-family: verdana,tahoma,san-serif,arial;
font-size: 13px;
margin: 0;
padding: 0;
}
a img {
border: 0;
}
a, a:link, a:visited, a:hover, a:active {
color: #ff9600;
text-decoration: underline;
}
a:hover {
color: #000000;
}
li {
background-image:url(li.jpg);
background-repeat:no-repeat;
background-position:left;
list-style-type: none;
padding-left: 18px;
}
#header {
width: 100%;
}
#header h1 {
color: #ff9600;
font-size: 25px;
padding-top: 5px;
}
#header h2 {
position: absolute;
top: 0;
padding-left: 55px;
color: #CCCCCC;
font-size: 13px;
}
#main {
border-top: 5px solid #0042ff;
border-bottom: 5px solid #0042ff;
position: absolute;
background-color: #FFFFFF;
height: auto;
margin: 0;
width: 98%;
color: #000000;
padding-right: 2%;
}
#main h1 {
color: #ff9600;
font-size: 19px;
}
#main p {
text-indent: 55px;
}
#rightCol {
float: right;
width: 20%;
position: absolute;
right: 0;
height: 100%;
border-left: 1px dotted #ff9600;
}
#leftCol {
float: left;
width: 75%;
padding: 2%;
}
#footer {
text-align: center;
clear: both;
}
</style>
</head>
<body>
<div id="header">
<h2>I am so fly</h2>
<h1>BlackNine</h1>
</div>
<div id="main">
<div id="rightCol">
<ul>
<li><a href="">asdf</a></li>
<li><a href="">asdf</a></li>
<li><a href="">asdf</a></li>
<li><a href="">asdf</a></li>
<li><a href="">asdf</a></li>
<li><a href="">asdf</a></li>
</ul>
</div>
<div id="leftCol">
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
</div>
</div>
<div id="footer">
asdfsafjsdkf sdafkljsdfk lsdlkfjsd afkljsdfsdklfjsdf asdfksdjf
</div>
</body>
</html>
Here is what it looks like. Any suggestions? Thanks for taking the time to read my question. I have 2 types of pages. One with 2 colums and one with 3. If I have only one row, it all works out fine. When I add subsequent rows, the page gets all messed up. Why? How do I make "contentleft" always be on the lefthand side? CSS Code:
body {
text-align:center;
margin-top: 0px;
background-color: #d8d8d8;
}
a:visited {
color:#c0c0c0;
}
a:hover {
color:red;
}
a {
color:white;
}
#frame {
width: 640px;
text-align: center;
}
#main {
background-color: #6699cc;
width: 640px;
}
#main p.pagetitle {
color: white;
font-size: 32;
}
#main p.title {
color: white;
font-size: 22;
text-align: left;
text-decoration: underline;
font-weight: bold
}
#sub {
background-color: #6699cc;
width: 640px;
padding-left: 20px;
padding-right: 20px;
}
#sub p.titleleft {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
text-decoration: underline;
}
#sub p.titlecenter {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
text-decoration: underline;
}
#sub p.titleright {
float: left;
color: #000073;
font-size: 15;
width: 280px;
padding: 5px;
text-decoration: underline;
}
#sub p.contentleft {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
}
#sub p.contentcenter {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
}
#sub p.contentright {
float: left;
color: #000073;
font-size: 15;
width: 280px;
padding: 5px;
}
#sub p.titlerightright {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
text-decoration: underline;
}
#sub p.titleleftleft {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
text-decoration: underline;
}
#sub p.contentrightright {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
}
#sub p.contentleftleft {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
}
html: 3 colum example. Code: <html> <!-- Generated by AceHTML Freeware http://freeware.acehtml.com --> <!-- Creation date: 10/15/04 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="bradsonorus@hotmail.com"> <meta name="generator" content="AceHTML 5 Freeware"> <link rel="StyleSheet" type="text/css" href="test.css"> </head> <body> <div id="frame"> <div id="main"> <img src="C:/Lisa/images/topbar.png" width="640" height="30" alt=""> <img src="C:/Lisa/images/highburyschool.jpg" width="166" height="104" alt="Highbury School, Winnipeg, Manitoba, Canada"> <span> </span> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="500" height="100" id="LisasNavBar" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="C:/Lisa/LisasNavBar.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#6699cc" /> <embed src="C:/Lisa/LisasNavBar.swf" quality="high" bgcolor="#6699cc" width="500" height="100" name="LisasNavBar" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <p class="pagetitle">TESTS</p> <p class="title">Tests:</p> </div> <div id="sub"> <p class="titleleft">Test Topic / Subject</p> <p class="titlecenter">Test Date</p> <p class="titleright">Suggestions</p> <p class="contentleft">Math: Long Division Test</p> <p class="contentcenter">Tuesday, October 15, 2004</p> <p class="contentright">Review pages 31 to 40 in Math text.</p> <p class="contentleft">English: Spelling Test</p> <p class="contentcenter">Tuesday, October 22, 2004</p> <p class="contentright">Practice all the 17 syllable words, they will be on the test.</p> <p class="contentleft">Phys. Ed.</p> <p class="contentcenter">Tuesday, November 5, 2004</p> <p class="contentright">Full Marathon. Those that don't make it under the 5 hour limit will fail.</p> <p><hr width="80%"></p> <p><a href="C:/Lisa/home.htm">Home</a> | <a href="C:/Lisa/homework.htm">Homework</a> | <a href="C:/Lisa/projects.htm">Projects</a> | <a href="C:/Lisa/specialevents.htm">Special Events</a> | <a href="C:/Lisa/tests.htm">Tests</a> | <a href="C:/Lisa/links.htm">Links</a></p> </div> <img src="C:/Lisa/images/bottombar.png" width="640" height="30" alt=""> </div> </body> </html> I'm trying to recreate a header that was built using tables. Here is an example of the original header. This is how I want it to look using div. http://65.175.116.253/logo/html_head_p1.html Here is the code for the table based header Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> </HEAD> <body bgcolor="white" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <basefont face="verdana"> <table width="780" height="68" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#004C91" align="center" valign="center" width="222"><img src="http://65.175.116.253/logo/logo.gif" width="196" height="49" hspace="10"> </td> <td bgcolor="#004C91" align="center" valign="center" width="600"> <img src="http://65.175.116.253/logo/banner.jpg"> </td> </tr> </table> </body> </html> Here is the header using the code with DIVs. http://65.175.116.253/logo/styletest.html Here is the code I have using divs. I'm confused as to how to align the images correctly in the divs... Can someone show me how to correct this? I put the style info in teh same document so it would be easier to read. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#headerlogo {
background: #004C91;
position: absolute;
width: 222px;
height: 68px;
top: 0px;
padding-left: 0px;
padding-right: 0px;
}
#headerbanner {
background: #004C91;
position: absolute;
width: 600px;
height: 68px;
top: 0px;
padding-left: 50px;
padding-right: 0px;
}
</style>
<title>Untitled</title>
</head>
<body>
<div id="headerlogo"><img src="http://65.175.116.253/logo/logo.gif">
<div id="headerbanner"><cfinclude template="banner.cfm">
</body>
</html>
Hello everyone; I've been working on my webpage and I just noticed that my page loaded differently ( not aligned ) in my friends wide screen Laptop. I was hoping if anyone knows of a way to display the webpage properly no matter what resolution or screen? would this be done with css or just plain HTML? please let me know. thank you. mamut |
|||||||