|
CSS - Navigation Li / A Ie Spacing Woes...
Hello, could someone please visit this page in IE -
http://www.brooksidetransmission.co...p?service=13484 On the page click on one of the links in the body for the various models of Merceds Benz. On the next page look at the main navigation and notices how it is broken, with one of the main nav entires going down the next line. The code for both pages is identical and I can't image why I am seeing this bug??? Similar TutorialsHi I am having a nightmare trying to get my horizontal navigation items to fill the width of my page and looking the same in IE and FF. Here is the page http://www.designhomemanagement.com/new/ You will see that in IE the spacing is different. They need to fill the width of the design (760px) Please someone help me! Thanks I'm in the early stages of creating a Web site without tables, and am stuck on what appears to be a minor display issue in Firefox/IE. Please check out the following test page in both browsers and note the spacing issue between the navigation boxes on the left. IE displays about how I want them look. Firefox, on the other hand, blows the navigation boxes wide apart. I've been dinking around long enough and would love some advice, before I go and start using tables again, and I know how CSS purists would love that. Ha ha. (URL address blocked: See forum rules)/testsite/index.htm WELL, AS IT TURNS OUT, I AM UNABLE TO POST A LINK TO THE PAGE. WHY ON EARTH WOULD A HELP FORUM NOT ALLOW ME TO POST A LINK TO THE PAGE IN QUESTION? (That makes two questions I have now.) Well, despite extremely restrictive rule, I would very much appreciate any help you can provide. - Scott Here's the CSS, which is probably useless now without the page: Code: #bannerback {
background-image: url('images/bannerback.gif');
background-repeat: repeat-x;
}
body {
margin: 0px;
background-repeat: repeat-y;
background-image: url('images/leftbar.gif');
background-position: left;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bolder;
color: #FFFFFF;
vertical-align: middle;
text-indent: 27px;
margin-top: 12px;
}
#content {
width:990px;
}
#expertise, #talent, #projects {
width: 230px;
margin-left: 11px;
float: left;
background-color: #E8E8E8;
background-image: url('images/navheadback.gif');
background-repeat: repeat-x;
position: absolute;
}
#expertise {
margin-top: 10px;
}
#talent {
margin-top: 235px;
}
#projects {
margin-top: 419px;
}
#content-main {
width: 730px;
margin-left: 260px;
padding-top: 10px;
position: absolute;
}
a.nav {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
text-decoration: underline;
}
p.nav {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
text-decoration: underline;
padding-left: 27px;
margin-bottom: -4%;
}
Here's the page code. Gee, sure would like to give you a link. 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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled 1</title> <link rel="stylesheet" type="text/css" href="transtyles.css" /> <style type="text/css"> </style> </head> <body> <div id="bannerback"> <img alt="" src="images/banner.gif" width="990" height="116" /></div> <div id="content"> <div id="expertise"> <h3>Our Expertise</h3> <p class="nav"><a class="nav">Traffic Engineering</a></p> <p class="nav"><a class="nav">ITS</a></p> <p class="nav"><a class="nav">Transportation Planning & Environmental Documentation</a></p> <p class="nav"><a class="nav">GIS/CAD</a></p> <p class="nav"><a class="nav">Surveying, Mapping & PLATS</a></p> <p class="nav"><a class="nav">Transportation Design</a></p><br/> </div> <div id="content-main"> <p>Nullam sagittis velit porttitor mi mollis nec varius leo molestie. Phasellus pretium pretium bibendum. Praesent pharetra ante et nibh facilisis pharetra. Phasellus a sem enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus commodo iaculis neque, sed cursus massa consequat in. Ut elementum, risus in dictum condimentum, enim elit luctus justo, eget malesuada augue ante luctus velit. Quisque lobortis sapien sed dui porta quis adipiscing magna luctus. Suspendisse nunc justo, ultrices et tristique et, dapibus eu neque. Praesent vel orci neque. Integer magna nunc, luctus vitae lobortis in, vulputate id eros. Cras sem nunc, suscipit a rutrum vitae, consectetur in tortor. Sed est metus, dapibus a sodales semper, cursus in augue. Aenean non leo eros, quis consequat nisi. Nam massa orci, commodo et pharetra quis, convallis in tortor. Fusce imperdiet mi nisi.</p> <p>Nullam sagittis velit porttitor mi mollis nec varius leo molestie. Phasellus pretium pretium bibendum. Praesent pharetra ante et nibh facilisis pharetra. Phasellus a sem enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus commodo iaculis neque, sed cursus massa consequat in. Ut elementum, risus in dictum condimentum, enim elit luctus justo, eget malesuada augue ante luctus velit. Quisque lobortis sapien sed dui porta quis adipiscing magna luctus. Suspendisse nunc justo, ultrices et tristique et, dapibus eu neque. Praesent vel orci neque. Integer magna nunc, luctus vitae lobortis in, vulputate id eros. Cras sem nunc, suscipit a rutrum vitae, consectetur in tortor. Sed est metus, dapibus a sodales semper, cursus in augue. Aenean non leo eros, quis consequat nisi. Nam massa orci, commodo et pharetra quis, convallis in tortor. Fusce imperdiet mi nisi. </p> <p>Nullam sagittis velit porttitor mi mollis nec varius leo molestie. Phasellus pretium pretium bibendum. Praesent pharetra ante et nibh facilisis pharetra. Phasellus a sem enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus commodo iaculis neque, sed cursus massa consequat in. Ut elementum, risus in dictum condimentum, enim elit luctus justo, eget malesuada augue ante luctus velit. Quisque lobortis sapien sed dui porta quis adipiscing magna luctus. Suspendisse nunc justo, ultrices et tristique et, dapibus eu neque. Praesent vel orci neque. Integer magna nunc, luctus vitae lobortis in, vulputate id eros. Cras sem nunc, suscipit a rutrum vitae, consectetur in tortor. Sed est metus, dapibus a sodales semper, cursus in augue. Aenean non leo eros, quis consequat nisi. Nam massa orci, commodo et pharetra quis, convallis in tortor. Fusce imperdiet mi nisi. </p> <p>Nullam sagittis velit porttitor mi mollis nec varius leo molestie. Phasellus pretium pretium bibendum. Praesent pharetra ante et nibh facilisis pharetra. Phasellus a sem enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus commodo iaculis neque, sed cursus massa consequat in. Ut elementum, risus in dictum condimentum, enim elit luctus justo, eget malesuada augue ante luctus velit. Quisque lobortis sapien sed dui porta quis adipiscing magna luctus. Suspendisse nunc justo, ultrices et tristique et, dapibus eu neque. Praesent vel orci neque. Integer magna nunc, luctus vitae lobortis in, vulputate id eros. Cras sem nunc, suscipit a rutrum vitae, consectetur in tortor. Sed est metus, dapibus a sodales semper, cursus in augue. Aenean non leo eros, quis consequat nisi. Nam massa orci, commodo et pharetra quis, convallis in tortor. Fusce imperdiet mi nisi. </p> <p> </p> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> content<br /> content<br /> <br /> adsfdasfdas<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> <div id="talent"> <h3>Our Talent</h3> <p class="nav"><a class="nav">Experience</a></p> <p class="nav"><a class="nav">Meet the Staff</a></p> <p class="nav"><a class="nav">Careers</a></p> <p class="nav"><a class="nav">Awards / DBE Certification</a></p> <p class="nav"><a class="nav">Contact Us</a></p> <br /> </div> <div id="projects"> <h3>Our Projects</h3> <p class="nav"><a class="nav">Project Map</a></p> <p class="nav"><a class="nav">Wisconsin</a></p> <p class="nav"><a class="nav">Illinois</a></p> <p class="nav"><a class="nav">Minnesota</a></p> <p class="nav"><a class="nav">National</a></p><br/> </div> </div> <div id="footer"></div> </body> </html> Hi, I have a margin or spacing between the header image and the navigation bar. I'm unsure of how to remove it. I want the navigation to be directly underneath the header. This is the HTML Code: <div id="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="horses.html">Horses</a> <ul> <li><a href="stallions.html">Stallions</a></li> <li><a href="mares.html">Mares</a></li> <li><a href="geldings.html">Geldings</a></li> <li><a href="foals.html">Foals</a></li> </ul> </li> <li><a href="showteam.html">Show Team</a></li> <li><a href="showresults.html">Show Results</a></li> <li><a href="youths.html">Youths</a></li> <li><a href="sales.html">Sales</a></li> <li><a href="contactus.html">Contact Us</a></li> </ul> </div> This is the CSS Code:
#header {
background:#ddd;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
border-top:1px solid #FFF;
}
#navbar {
font-family: Edwardian Script ITC, Verdana, Arial, sans-serif;
font-size:36px;
width:100%;
margin-top:0px;
padding:0px;
height:63px;
background-color:#FFF;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 7px 8px;
background-color: white;
color: black;
text-decoration: none;
}
#navbar li ul {
display: none;
width: 5em; /* Width to help Opera out */
background-color: white;
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: white;
border-bottom: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color:#FFC; }
Any help would be appreciated! It's really frustrating me. I've tried looking around other websites for help too. Kim Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! ok I've been playing with divs and trying to get them working well, but no matter what I do I can never get any site I try and create with divs looking as good as I could do with tables. I've just grown up using tables, and am irritated that that's the way it was because I would like to be using divs. I posted a thread earlier and got some good help, but have since decided on using a different design and can't quite get it the way I want it. so, this is a big ask, but could someone 'convert' this table based site to something that looks the same using divs so I try and relate how divs work to how tables work a bit better? thank you very very much to anyone that can. html Code:
<html>
<head>
<style>
@import url(template.css);
</style>
</head>
<body>
<table id='main' cellspacing='0'>
<tr>
<td id='logobox'>
logo
</td>
<td id='menu'>
menu
</td>
</tr>
<tr>
<td id='content' colspan='2'>
content
</td>
</tr>
<tr>
<td id='footer' colspan='2'>
footer
</td>
</tr>
</table>
</body>
</html>
css Code:
body, html
{
height: 100%;
background-color: #fff;
margin: 0px;
}
td
{
border: 1px solid #000;
}
table#main
{
width: 60%;
height: 100%;
margin: 0px auto;
border: 1px solid #000;
}
td#logobox
{
width: 80px;
height: 80px;
}
td#menu
{
}
td#content
{
columnspan: 2;
}
td#footer
{
height: 1%;
}
I would really appreciate some help with this layout issue I am having. Look at this page in IE 9 - http://www.hotstepperspainting.com/.../assistance.asp Notice the menu wraps the last link around and onto the body of the page? Also note that the bottom nav bar is doubled up. Now in IE8 I don't have the menu problem but do have the footer issue. In IE7 it looks like it should. I would really appreciate it is someone could shed some light for me on this. Tom I am trying to get my suckerfish dropdown menu to be centered on the page regardless of the resolution of the monitor. I know this is possible, but I just can't wrap my head around it. This is what I have so far: Code: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title><?php echo $title_page; ?></title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="site_files/style/web.css" /> <link rel="Shortcut Icon" href="site_files/pictures/favicon.ico" /> <script type="text/javascript" src="site_files/ie_drop.js"></script> </head> <body> <div id="header"> <p>NAVPACMETOCCEN San Diego Operational Home Page</p> </div> <div id="info"> <p>This page will be down at 1100 GMT on 20 June 2005. Click <a href="site_files/php/status.html">here</a> for more information.</p> </div> <div id="menu"> <ul id="nav"> <li><a href="index.php">Home Page</a></li> <li>Support <ul> <li><a href="site_files/php/a.html">Ship Specific</a></li> <li><a href="site_files/php/a.html">Unit Specific</a></li> <li><a href="site_files/php/a.html">Detachment</a></li> <li><a href="site_files/php/a.html">Mobile Env. Team</a></li> <li><a href="site_files/php/a.html">Coast Guard</a></li> </ul> </li> <li>Satellite <ul> <li><a href="site_files/php/a.html">Infrared</a></li> <li><a href="site_files/php/a.html">Visual</a></li> <li><a href="site_files/php/a.html">Water Vapor</a></li> <li><a href="site_files/php/a.html">Lightning</a></li> <li><a href="site_files/php/a.html">Analysis</a></li> </ul> </li> <li>Products <ul> <li><a href="site_files/php/a.html">Warnings</a></li> <li><a href="site_files/php/a.html">Forecasts</a></li> </ul> </li> <li>Aviation <ul> <li><a href="site_files/php/a.html">Products</a></li> <li><a href="site_files/php/a.html">Contact Info.</a></li> <li><a href="site_files/php/a.html">OBS/TAFS</a></li> <li><a href="site_files/php/a.html">Aviation Links</a></li> </ul> </li> <li><a href="site_files/php/links.html">Links</a></li> </ul> </div> <div id="leftside"> <p class="leftmenu"><a href="http://www.navy.com">Navy Jobs</a></p> <p class="leftmenu"><a href="http://www.donhr.navy.mil/NoFearAct.asp">No Fear Act</a></p> <p class="leftmenu"><a href="http://www.navy.mil">U.S. Navy Website</a></p> <p class="leftmenu"><a href="html/privacy.html">Privacy Policy</a></p> <p class="leftmenu"><a href="site_files/disclaimer.html">DoD Disclaimer</a></p> </div> </body> </html> And here is the style sheet: Code:
/* This part tells us how the hyperlinks will be handled by the browsers, and also what the background will be */
a:link { /* This is the link standard color*/
color: #000000; /*black*/
}
a:visited { /* This is the color of an already visited link*/
color: #800080;/*purple*/
}
a:hover {/* This is the color your link will take when you move your mouse over it*/
color: #FF0000;/*red*/
text-decoration: none;
}
a:active {/* This is the color and effect when you physically click on the link*/
color: #008080; /*teal*/
}
a { /*This tells the browser not to underline any links */
text-decoration: none;
}
/* This begins the header and the information notice portion */
#header {
margin: -14px -8px 0px -8px;
padding: 10px;
height: auto;
background: #000060;
}
#header p {
margin: 0;
height: auto;
color: #FFFF1B;
text-align: center;
font: small-caps 24px verdana, san-serif, serif;
}
#info {
margin: -1px -8px 0px -8px;
padding: 1px;
height: auto;
}
#info p {
margin: 0;
height: auto;
color: #0000FF;
background: #FFFFFF;
text-align: center;
font: bold 12px arial, san-serif, serif;
}
/* This ends the header and the information notice portion */
/* This begins the Drop-down menu portion*/
#menu { /* Top-Right-Bottom-Left */
margin: 0 0 0 145px;
padding: 0;
width: auto;
font: small-caps bold 12px verdana, san-serif, serif;
}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
li { /* all list items */
float: left;
position: relative;
width: 125px;
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 14px;
left: 0;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
/* This ends the drop-down menu portion */
/* This begins the left-side menu portion */
#leftside {
margin: 100px 0px 0px -8px;
width: 115px;
color: #000000;
font: small-caps 12px arial, san-serif, serif;
}
.leftmenu {
margin: 5px 0 2px 0;
height: 15px;
background: #DDEEFF;
}
#pkinotice {
margin: 0px 50px 0px 125px;
font: bold 12px arial, san-serif, serif;
}
.pki {
border: 2px solid #FF0000;
As you can see, I've just moved it over manually 145 px, and that centers it pretty well if you are viewing it at 1024x768, but at higher resolutions, the 145px is not sufficient for the centering. If anyone has an idea on how to fix it, I'd appreciate help. The solution must be able to validate, and work in both IE and a compliant browser (mozilla or firefox is what I use). Also, if the style sheet code can be cleaned up, or you see mistakes, don't hesitate to tell me. I've been learning CSS2.1 for about 3 months now, but I am not a whiz at it... I appreciate the help. Many thanks... Bryan Please look at these two pages - www dot aamco-houston dot com www dot aamco-houston dot com/warranties.asp On the second page, in IE9, the navigation gets broken and put on two lines. In IE7, IE8, Firefox,etc. it looks fine. Can someone give me a workaround perhaps? Thanks. Tom Hey, all! I'm having a seemingly simple problem... and I'd really appreciate if you guys could help me out! I have no idea how to do what I want done, but I know it's possible. I want to give every <tr> in <table class="forumList"> a 'border-bottom: 1px solid #000;' style.... except for the last <tr>. HOWEVER, if a new table is created, I want it to start showing the border-bottom again... until the last <tr> in the table. How would I go about doing this? Hi, This will help explain it: http://www.mattvonfat.com Now there is a container DIV (the box that goes down to almost bottom of screen) and 4 DIVs in the container (Logo, two link bars and my content). My problem is that I want the content to fill up as much as possible and have the bottom link bar (which is bordered) to be at the very bottom. Now, I tried adding height: 100%; to my content style but that made it 100% of the body height. Is there way to get it to just fill up as much as possible? I just noticed that one problem could be that the containing DIV uses absolute positioning to make the container 50px from both bottom and top. Would this be a problem? Here is the css for both the container and the content: css Code: Original - css Code /* container */ div#outer { position: absolute; width: 700px; font: 12px Verdana; background-color: #FFFFFF; border: 1px solid #000000; top: 50px; bottom: 50px; left: 50%; margin-left: -350px; padding: 0px; min-width: 700px; } /*content*/ div#indexs { border-top: 1px solid #000000; padding: 10px; margin: 0px; text-align: center; }
Thanks for any help you can give me with this, Matthew [edit] Hmm and i just realised that it doesn't even appear in IE the way it does in mozilla so I have two problems...[/edit] I'm having serious problems with the Peekaboo bug in IE. At least I think its that - I've tried all the fixes listed on positioniseverything and none are fixing it... http://ucy.sitemakers.com/courses.php I've got a three column layout taken from alistaparts Holy Grail layout which I've had working on many other sites with no problems, but I have added another two column layout directly above the three column one in this case. The problem im having is a jumping div element, the left column. When you click on the Courses link the element is in the centre of the page but moving the mouse around the main menu items will make it jump back into place. On page refresh the column is in the right place. Wierdly hovering over the link in the centre column doesnt make the offending div jump back like I would have expected. Taking out the following IE hack from the CSS: *html #cc_l { left:22em;} Makes the div appear in the correct place when clicking on the Courses link, until I hover over the menu again - then it jumps off the left of the page! This is doing my nut in, anyone have any ideas? I'm working on reworking my flash site into a CSS/HTML site. Tired of dealing with flash. Anyways....I am working on this page currently and am having trouble getting 3 divs to line up properly in IE. They look great in Firefox! Take a look and let me know if you have any ideas. Any help is much appreciated. Here's the link www .crealities.com/2008/inspiration.htm Hi. I've been trying to add some basic CSS to my forums. Basically it's just this: Code: <div style="float:left;width:24%;"> </div> <br /> <div style="float:left;width:24%;"> </div> <div style="float:right;width:74%;"> </div> It works fine with just the first and last div. But it won't work with the middle div there. I dunno what CSS to use. Edit: I can understand why it's doing that, add left | at 24%, add another | at 24% beside it for || but the last | is 74% and won't fit so it goes on a new line. Then the second | stretches to 74% to fit the | at 74% below it. Hmm, might revert to tables. Having some problem's with this layout i'm 'attempting' to develop in CSS... The Div setup Code:
<div id="header">
Header
</div>
<div id="container">
<div id="menu_left">
Menu Left
</div>
<div id="content">
Content
</div>
<div id="menu_right">
Menu Right
</div>
</div>
<div id="footer">
Footer
</div>
The CSS Code:
/* specific divs */
#container {
margin: -3px;
width: 100%;
text-align: center;
}
#header {
height: 100%;
text-align: left;
border-style: dotted;
border-width: 1px;
border-color: #000000;
}
#content {
width: 60%;
position: fixed;
float: left;
border-style: dotted;
border-width: 1px;
border-color: #000000;
}
#menu_left {
width: 20%;
position: fixed;
float: left;
border-style: dotted;
border-width: 1px;
border-color: #000000;
}
#menu_right {
width: 20%;
border-style: dotted;
border-width: 1px;
border-color: #000000;
}
#footer {
border-style: dotted;
border-width: 1px;
border-color: #000000;
}
I've been looking around I don't really know where I'm going wrong due to my lack of experiance with CSS.... But in IE it won't float the DIV [menu_right] i've tried using position absolute|relative|fixed none seem to work i've been trying different combo's of Floats and mostly anything I can think of if someone here would be able to spare some time to help a 'noob' i'd be very gratefull... Thanks I'm having trouble getting my background to render for my site. When I write the code in the HTML ex. <body background="images/currentbgimage.jpg"> it brings up the image fine. This would suffice if I could tell the image not to repeat. But you can't to my knowledge in the body tag. The image won't display if I write it in the CSS though. ex. body {background-image: url('images/currentbgimage.jpg')} or body {background: url('images/currentbgimage.jpg')} I also tried it with the JPG in the folder with the HTML code, but to no avail. Any help will be appreciated. Skolar Hi. K, the site (thus far) looks great in IE, as the CSS is functioning perfectly. However, when checked in FF, it pretty well ignores the CSS for the body. I"ve undoubtedly missed somethin', just don't know what it is. Thanks here's the css; Code:
.borders {
border: 1px solid #666666;
text-align:center;
}
}
.text {
font-family:Century Gothic, Arial, sans-serif;
font-size: 11px;
color: #333333;
text-align:left;
}
}
.listtext {
font-family:Century Gothic, Arial, sans-serif;
font-size: 11px;
color: #333333;
text-align:left;
}
table.menu {
border:1px solid #999999;
background:#CCCCCC;
}
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;
}
and here's 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">
</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/index.htm">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 class="borders" width="640" colspan="4">
<div class="text"><br>
Welcome to <b>Kyrtsakas Law Office</b>.<br><br>
<b>Christos Kyrtsakas</b>, <b>LL.B.</b> specializes in <b>Real Estate Law, Title Insurance, Purchases, Sales, Mortgages,</b> and readily welcomes <b>CAW Plans</b>.<br><br>
Call Chris today at (519)-974-6303, or drop by the office, located at 5655 Tecumseh Road East (across from the Fire Station), Windsor, ON.<br><br>
"<i>Having a Lawyer Makes it Safer for You</i>!"<br><br>
</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="640" colspan="4">
</td>
<td class="borders" width="106" colspan="1">
</td>
</tr>
</table>
</body>
</html>
Thank you! 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">
<head>
<title></title>
<style type="text/css">
<!--
body
{
font-family: tahoma, verdana, arial
}
#main
{
width: 60%;
margin: 10px auto;
border: solid 1px #333;
background-color: #fff
}
#header
{
padding: .5em;
background-color: #fff
}
#sidebar
{
float: left;
width: 100px
}
#content
{
padding: 20px;
border-left: dotted 1px #ccc;
margin-left: 140px
}
#footer
{
padding: .5em;
border-top: solid 1px #ccc
}
-->
</style>
</head>
<body>
<div id="main">
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<form action="login.php" action="post">
<p>Username: <input type="text" name="username" /></p>
<p>Password: <input type="password" name="password" /></p>
<p><input type="submit" value="Login"></p>
</form>
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</div>
<div id="content">
This is the content
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Why doesn't this automatically adjust the size of the div next to it? Am I better going for the position attribute here guys? Cheers Hi folks, I'm having issues stying button elements the way I want. The code below illustrates what I'm after. I'm wondering whether there's a fix or whether I should just give up on the button element as being too much trouble. Cheers, Pete Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>title</title>
<script type="text/javascript"></script>
<style type="text/css">
button{
width: auto;
overflow: visible;
color: white;
font-weight: bold;
background: green;
padding: 1px;
margin: 0;
border: 1px solid red;
}
.fakeButton
{
border: 1px solid red;
color: white;
font-weight: bold;
background: green;
padding: 1px;
float: left;
}
div{
background: blue;
padding: 0 10px;
}
</style>
</head>
<body>
<br />
<div class="fakeButton">
<div>Login</div>
</div>
<button id="loginSubmit2" type="submit">
<div>Login</div>
</button>
<button>
Login
</button>
<ul>
<li>The fake button on the left is how I want it to look.</li>
<li>The button in the middle is how it actually looks</li>
<li>The button on the right shows that border is somehow triggered by having a nested 'block' element.</li>
</ul>
</body>
</html>
Please look at this site - http://www.hitechtranny.com In FF and IE7. Notice in FF that the last link "Contact" on the main nav does not fit? I use this navigation on numerous sites and I always get this problem. Is there a quick fix such as a margin/padding issue I am missing that would fix this? Thanks. Tom I can't get a drop down menu to display and don't know what I'm doing wrong. My guess is that other styles for this menu are interfering, but I've tried experimenting and it never works. Can anyone kindly assist? Here's the CSS for the part of my navigation menu I'm working on (I know this is not the most streamlined): Code: #nav2 {
float: right;
background-image: url(../2010site/graphics/nav2back.jpg);
background-repeat: no-repeat;
height: 32px;
font-size: 14px;
color: #ffffff;
text-decoration: none;
text-align: center;
margin: auto;
padding: 0px 30px 0px 0px;
}
#nav2 ul li {
display: inline;
list-style: none;
background-image:url(../2010site/graphics/rednavdetail.jpg);
background-repeat: no-repeat;
margin: auto;
padding: 0px 20px 0px 20px;
}
#nav2 a {
color: #ffffff;
margin: auto;
padding: 0px 0px 0px 0px;
}
#nav2 a:hover {
text-decoration: underline;
margin: auto;
padding: 0px 0px 0px 0px;
}
Then I'm trying to add a drop down to a nested list item within that navigation using Code: li ul {display: none;}
li:hover > ul {display: block;}
But whenever I add that at the end of the nav2 styles, I can only see my nested menu that is supposed to appear during the hover. The other menu items beyond the nested UL don't appear at all. Here's the html: Code: <ul>
<li><a href="http://">Schedule</a>
<ul>
<li><a href="http://">item one</a></li>
<li><a href="http://">item two</a></li>
<li><a href="http://">item three</a></li>
</ul>
</li>
<li><a href="http://">Programs</a></li>
<li><a href="http://">Events</a></li>
<li><a href="http://">Donate</a></li>
</ul>
|
|||||||