|
CSS - Ie, Html 5 And Css Problems.....driving Me Mad!!
Hi everyone!
I've been struggling with a few problems with a new site I have just developed in HTML5 and CSS3... These problems only occur in IE8 (and compatibility mode of)...I have IE9 installed and I can't reproduce any of the problems when I use compatibilty mode, however when I use IE Tester I can view the issues...which are.... 1. When I click on a link in the footer or in the top of the header (home/contact) they are assigned 'visited' class but this makes them higher than the other links in the list... could this be anything to do with the 'nav' styling? 2. I can't produce bottom borders in the sub menus of the main navigation - I have tried removing padding, setting relative/absolute positioning and z-index values as has been suggested in other resources and nothing works!!! If anyone can give me any help at all...or if you need any further information or access to my style sheets etc please let me know - I will really appreciate it! Thanks in advance...Rachel Similar Tutorialshttp://wrath.wr.funpic.org Hello Devshed. I am new here and am here looking for help. Maybe I'm just tired and dumb right now to figure it out. Anyways if you would take a look at the site I pointed out you'll notice the bottom border is missing. Why? When I removed the float:left; on the lis it is fine but when it's in there it's all screwed up. Second thing... if you'll notice my hovers do not work in IE. Is there an alternate way for me to get them to work in IE. Thanks a lot. Hi all, Not exactly sure where this post truely belongs (CSS, HTML, JS forums) but firt trying this forum. I'm trying to create a simple expandable link but the link jumps up and down when expands/collapses. The code attached, any ideas any one. Code demonstrates the problem so please save it as .html and view it. -- Thanks. Code:
<style type="text/css">
.faq_hidden
{
visibility: hidden;
}
.faq_shown
{
visibility: visible;
}
</style>
<script type="text/javascript">
function showReview(n)
{
document.getElementById(n+'_r').className = 'faq_hidden';
document.getElementById(n+'_f').className = 'faq_shown';
}
function hideReview(n)
{
document.getElementById(n+'_f').className = 'faq_hidden';
document.getElementById(n+'_r').className = 'faq_shown';
}
</script>
<div id="r1_r" class="faq_shown">
<a onclick="showReview('r1'); return false;" href="#">
<div>
Completing the questions 1
</div>
</a>
</div>
<div class="faq_hidden" id="r1_f">
<a onclick="hideReview('r1'); return false;" href="#">
<div>
Completing the questions
</div>
</a>
<p>
Completing the questionnaire should take 8 - 10 minutes of your time.
Be honest, answer as you would normally behave and act, in response to
the statements and questions.
</p>
</div>
Hey, What's messing me around is trying to have three tables next to each other in a row, like; Code: <div style="float:left:"></div> <div style="float:left; width:100px;"></div> <div style="float:left; width:100px;></div> Say someone is viewing the website with a 1000px width resolution. I want the first table to expand to 800px and the last two tables to take up their 200px. I can't seem to get this working. If I add width:100%; to the first table it takes its own row and pushes the other two div's below it. Is there a CSS property to make it take up 100% of the availible space, without pushing the other div tables to the row below, unless the contents of the first table would force a horizontal scroll bar? (i.e if the first table contents can't be shrunk any more, but the user still shrinks their browser width, then it pushes the two other div's below to avoid a scroll bar) Thanks for your time, -Ross I'm TRYING to design a site with CSS, but every browser seems to display CSS differently. How do I do it? How can I make a CSS site that'll render properly in IE6 & 7 and FF, and at 800x600 and 1024x768? This is driving me absolutely bonkers. Look at my site: http://www.firstinsurancefunding.net/ It displays differently in EVERY different browser. WHAT'S THE FIX?? (sorry, I'm frustrated. Could really use some pointers). Please visit this page - http://www.tmhdesign3.com/real-estate-broker.asp See the gap, about 10px, on the page just below the header? For the life of me I can't get rid of it in FF. I opened Firebug and specified a top:-10px on the content div and it closes the gap. BUT, when I open my css file on the server and chagne that spec and then open the page I still have the gap??? Thanks for any help. Hi, I've got a strange problem, which I'm sure the answer to it is simple, but it escapes me at the moment. I have a site we're building at: 209.200.245.223/$sitepreview/quality-edge.com/content.aspx?usertype=2&page=home And as you can see, the background image is cut off (the colour on the left-hand side should be seen to fade out. I had to use min-height to get it to show, but I don't think that I completely understand min-height. Mainly my problem is the footer and the background. I think I've read every footer how-to there is and I can't seem to get anything to work properly. I'm not new to CSS so this is really frustrating me. Any help would be greatly appreciated. Thanks, Steph Take a look at this page http://www.gameworldx.com/test.html I removed most of the html exept the part giving me problems, but all of the CSS is there. You will see a blue bar(footer) and the white bar (bottom). Both of the links are blue and bold. Why? I have no idea. That is the problem. I noticed that is I remove the CSS for one div or the other, the opposite div shows correctly, but I dont know why it does that. Can anyone see any problems? It's really late, and I am tired, so its gotta be a really stupid mistake. Thanks! Hi there.. please have a look here, someone knows how to get rid of the 20px gap between the two black boxes? Hi - I have a small problem with a contact form on my website not working properly and it is driving me crazy, now let me explain. The website works fine in Firefox and Safari, and almost all the pages work fine in IE. The only thing that isn't working is the contact page in IE. The contact page works fine in Firefox and Safari. It's quite tricky to explain to you what I mean really, without showing you. The website is set to a certain width and I have all the margins and paddings correct, as far as I can tell anyway. The contact form is in PHP. The website should be in the middle of the browser at about 900px wide, but when you go to the contact page the PHP code is for some reason making it align to the left, and making the horizontal menu become vertical and out of place. If anyone on here knows about CSS and could take a look for me to see what's gone wrong, I don't think it would take to long, it's just something that I am not aware of or have overlooked in the code. It would be greatly appreciated if you could let me know if you would like to help me out. I'm new to this forum and I did come here looking for help but plan on sticking around so I look forward to meeting you all. Huge thanks if anyone wants to help me, will probably only take a few minutes, I would post the link here but I don't wanna get banned as I am a new member. Hey, so I am a beginner in css and I can't seem to figure out this problem. I am trying to get a td to float: left, and it works just fine on firefox, but IE7 is not showing the float. Here is the code I have for it /* Style for Entries in Category View (Cards View) */ /* -------------------------------------------------------- */ table.sobi2Listing { } table.sobi2Listing td { vertical-align: top; float: left; height: 1%; width: 97%; } /* new */ div.vcard_item { margin: 1px 0px 2px 0; padding: 6px; width: 97%; border:1px solid #dddddd; background-color:#fbfaf2; -moz-border-radius: 5px; The actual page is findawebsitedesigner.info/directory-2.html If you look at the entries, they are all floated perfectly in firefox, but not in IE7. If anybody has the fix to this I would love your help. If it works in Netscape, it will not work in IE If it works in IE, it will not work in Netscape. Soo, what am I to do? Okay, Im trying to make a table bg have an opacity of 40%. I've gone over the net to figure out the problems, knowing that filter:alpha{} is not recognized by Netscape. So, I found some information to help overcome Netscape woes, and now the opacity isn't work in IE. I need help before I rip all my hair out. So below is what Im working with. Code:
<html>
<head>
<style type="text/css">
#menu {
background-color: #FFFFFF;
filter: alpha(opacity=40);
filter: progid;:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.40;
position:relative; top:0;
}
.tdbg {
background-color: #FFFFFF;
filter: Alpha(Opacity=40);
}
</style>
</head>
<body>
<table width="610" border="0" cellpadding="5" cellspacing="0" bgcolor="#FF0000">
<tr>
<td align="center"> <table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="tdbg">FOO</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><div id="menu">FOO</div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
So, basically the top cell is "correct" in IE, but the bottom cel is not. And opposite for Netscape (7.0+) How can i fix it so its the same for both browsers? Hi guys Can anyone see why the following has a space under the nav in IE but not in Opera or FF? http://www.mitya.co.uk/cssproblem (CSS: http://www.mitya.co.uk/cssproblem/css/main.css ) I have been playing with it for ages and can't crack it. I've tried removing the clear, etc etc. I'm relatively new to CSS-based design (as opposed to tables) but feel the code and my CSS are OK. Thanks in advance Here is my website... in progress... xygps .com .au See my wrapper border extending up into the header at the top? I want this hidden under the header backgrounds. I have been messing around with z-index for ages with no luck... can anyone point me in the right direction?? sorry, this is probably a super newbie question but I just can't work it out!! I bought a php template to put my father website together with. I had worked with html and asp and had thrown together sites quickly in the past, so I didnt think much of it... But php turns out to be a whole new animal I guess, or maybe im missing something simply in the css. I have spent the last 4 hours looking online and asking friends, and I am no closer. I see plenty of forums with footer issues here, but none have given me any clues. Here is the site(im new, i cant post URLs): http://aeroprepare.com You will note that the bottom of the page has a large gray gap, between the footer content and the copywrite area. I simply want to remove this gap, shorten it, so the footer fits closer to the bottom of the page, like the copywrite section does. Sounds simple, but its driving me NUTS. here is my CSS: Code: /*** CSS Resets ***/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 14px;
font-family: inherit;
vertical-align: baseline;
}ul {list-style: none;}table { border-collapse: separate; border-spacing: 0;} caption, th, td {text-align: left; font-weight: normal;}blockquote:before, blockquote:after,q:before, q:after {content: "";} blockquote, q {quotes: "" "";}
/*** Start Site CSS ***********************************************************/
html, body {height: 100%;}
body {
font-family: Arial, Helvetica, Verdana, Times New Roman, sans-serif;
font-size:12px;
background-color:#fff;
}
#hm_background, #background {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom:-340px;
}
#hm_background {
background-repeat:repeat-x;
background-position:top;
}
#background {
background-repeat:repeat-x;
background-position:top;
}
.clear {
clear:both;
}
.clear-border {
margin:15px 0 15px 0;
clear:both;
border:1px solid #dbdbdb;
}
#wrapper {
margin:0 auto;
width:960px;
}
#logo {
float:left;
margin:27px 0 0 0;
width:284px;
height:67px;
}
#logo_home {
float:left;
margin:32px 0 0 45px;
width:212px;
height:52px;
}
/*** navigation ***************************************************************/
#nav_wrap {
position:relative;
margin:25px 0 0 460px;
padding:12px 0 0 15px;
background-repeat:no-repeat;
width:464px;
height:52px;
z-index:99;
}
#nav {
list-style-type:none;
margin:0;
padding:0;
}
#nav li {
float:left;
margin:0;
padding:0;
}
#nav li a {
position: relative;
float: left;
margin: 0 11px 0 0;
padding: 0 17px 0 0;
height: 37px;
text-decoration: none;
color: #fff;
font-size:12px;
z-index: 2;
}
#nav li a span {
display: block;
line-height: 21px;
padding: 3px 0 5px 20px;
color: #fff;
}
#nav_hover {
position: absolute;
float: left;
margin: 0 11px 0 0;
padding: 0 17px 0 0;
height: 28px;
z-index: 1;
}
#nav_hover span {
display: block;
padding: 3px 0 5px 20px;
line-height: 21px;
height: 28px;
z-index: 1;
}
/*** Dropdown ***/
#nav ul {
position:absolute;
display:none;
padding:0 0 12px 0;
width:142px;
top:48px;
list-style-type:none;
z-index:99;
}
#nav li ul li {
margin:0;
padding:0;
}
#nav li ul a, #nav li ul a:visited {
float:left;
padding:4px 0 0 12px;
width:130px;
height:20px;
font-weight:normal;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:142px;
margin:0;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
/*** footer *******************************************************************/
#footer_wrap, .push {
height: 360px;
clear: both;
}
#footer_wrap {
background-color:#e5e5e5; /*e5e5e5*/
border-top:1px solid #B3BCBF;
}
#footer {
margin:0 auto;
padding:12px 0 0 40px;
width:920px;
}
#footer a {
text-decoration:none;
}
.foot_clm_block {
float:left;
margin:25px 15px 15px 0;
width:165px;
}
.foot_clm_heading {
margin:0 0 5px 0;
font-size:14px;
text-transform:uppercase;
color:#fff;
}
.foot_clm_block ul {
margin:0;
padding:0;
list-style-type:none;
}
.foot_clm_block ul li {
color:#7F7F7F;
}
.foot_clm_block ul li a {
display:block;
padding:5px 0 0 5px;
height:20px;
color:#fff;
border-bottom:1px solid #CDCDCF;
font-size:12px;
}
.foot_clm_block ul li a:hover {
color:#4E4E4E;
}
#search_form_footer {
margin:5px 0 10px 1px;
height:24px;
border:1px solid #fff;
background-color:#fff;
}
#search_footer {
float:left;
padding:3px;
width:120px;
border:none;
}
#social_icons {
margin:5px 0 0 6px;
}
#social_icons a {
margin:0 4px 0 0;
}
#copyright_wrap {
border-top:1px solid #f1f1f1;
height:40px;
}
#copyright_txt {
margin:0 auto;
margin-top:10px;
width:880px;
color:#fff;
font-size:11px;
}
#copyright_txt a {
color:#fff;
font-size:11px;
}
/*** home page ****************************************************************/
#hm_header {
height:139px;
background-repeat:no-repeat;
background-position:top center;
padding-top: 1px;
padding-bottom: 1px;
}
#slider {
margin:0 0 0 23px;
padding:10px 0 0 33px;
background-repeat:no-repeat;
width:881px;
height:298px;
}
#slider_imgs img {
display:none;
}
#news {
margin:15px 0 10px 25px;
background-image:url(../images/news_back.jpg);
background-repeat:no-repeat;
width:911px;
height:65px;
overflow:auto; /* fixes margin collapsing */
}
#news_icon {
float:left;
margin:17px 0 0 17px;
background-image:url(../images/airplaneminilogo.png);
background-repeat:no-repeat;
width:55px;
height:41px;
}
#news_text {
margin:20px 0 0 15px;
float:left;
font-size:20px;
text-align:left;
width:800px;
}
#news_text ul {
margin:0;
padding:0;
list-style-type:none;
}
#news_text a {
text-decoration:none;
}
#three_columns {
margin:0 0 0 25px;
background-image:url(../images/3column_back.jpg);
background-repeat:no-repeat;
width:910px;
}
.three_clm_block {
float:left;
margin:25px 0 45px 0;
padding:0 25px;
width:250px;
height:200px;
background-image:url(../images/3column_border.jpg);
background-repeat:no-repeat;
background-position:top left;
}
.three_clm_circle {
float:left;
padding:6px 0 0 0;
width:32px;
height:26px;
background-repeat:no-repeat;
background-position:top left;
color:#fff;
text-align:center;
font-size:16px;
font-weight:bold;
}
.three_clm_title a {
float:left;
padding:5px 0 0 8px;
font-size:20px;
text-decoration:none;
}
.three_clm_text {
padding-top:7px;
clear:both;
line-height:19px;
}
/*** portfolio ****************************************************************/
#port_title h1 {
margin:15px 0;
font-size:34px;
font-weight:normal;
}
#port_wrap {
padding:32px 0 0 0;
}
.port_block {
float:left;
margin:0 22px 22px 0;
padding:7px;
background-color:#d6d9da;
border:1px solid #a7a9a9;
width:426px;
height:346px;
}
.port_img {
position: relative;
border:1px solid #fff;
background-color:#fff;
width:425px;
height:324px;
}
.port_txt {
position: absolute;
top: 110px;
left: 0;
padding:2px 0 0 10px;
width:240px;
height:18px;
background-color:#fff;
}
.port_mag_img {
position: absolute;
top: 10px;
left: 81px;
}
.port_txt a {
font-weight:bold;
text-decoration:none;
}
.port_img img {
border:none;
}
/*** blog / static page *******************************************************/
#header {
height:139px;
background-repeat:no-repeat;
background-position:top center;
padding-top: 1px;
padding-bottom: 1px;
}
#breadcrumb {
padding:15px 0 0 0;
height:25px;
color:#fff;
font-weight:bold;
}
#breadcrumb a {
color:#fff;
font-weight:bold;
text-decoration:none;
}
/*** sidebar ***/
#sidebar {
float:left;
margin:25px 0 0 0;
width:220px;
}
.sidebar_block {
margin:0 0 35px 0;
}
.sidebar_heading {
font-size:18px;
border-bottom:5px solid #d6d9da;
color:#23353e;
}
#sidebar ul {
margin:0;
padding:0;
list-style-type:none;
}
#sidebar ul li a {
display:block;
padding:4px 0 0 30px;
height:21px;
border-bottom:1px solid #d6d9da;
text-decoration:none;
color:#B3BCBF;
background-image:url(../images/bullet_arrow.jpg);
background-repeat:no-repeat;
}
#sidebar ul li ul li a {
padding:4px 0 0 54px;
background-image:url(../images/bullet_arrow_sub.jpg);
background-repeat:no-repeat;
}
#sidebar a:hover {
color:#959D9F;
}
#search_form {
margin:5px 0 0 1px;
width:216px;
height:24px;
border:1px solid #d6d9da;
background-color:#fff;
}
#search {
float:left;
padding:3px;
width:180px;
border:none;
}
.search_btn {
float:right;
margin:1px 0 0 0;
background-image:url(../images/search_icon.jpg);
background-repeat:no-repeat;
background-position:center;
border:none;
background-color:transparent;
cursor:pointer;
width:25px;
height:22px;
}
/*** content ***/
#content {
float:left;
margin:25px 0 0 55px;
width:645px;
}
#contentblog {
float:left;
margin:25px 0 0 55px;
width:100%;
}
#content_full {
float:left;
margin:25px 0 0 0;
}
.post_block {
margin: 0 0 20px 0;
padding: 0 0 20px 0;
border-bottom:1px solid #d6d9da;
}
#page_block {
margin: 0 0 20px 0;
padding: 0 0 20px 0;
}
#page_title h1 {
margin:0 0 5px 0;
padding:0;
font-size:34px;
font-weight:normal;
}
#content h1 a {
font-size:34px;
font-weight:normal;
}
.post_meta {
height:20px;
font-weight:bold;
color:#929393;
}
.post_meta a {
text-decoration:none;
font-weight:bold;
color:#929393;
}
.post_img {
padding:7px 0;
margin:10px 0;
border-top:1px solid #d6d9da;
border-bottom:1px solid #d6d9da;
}
.post_txt {
line-height:20px;
color:#23353e;
}
.post_txt img {
padding:3px;
border:1px solid #b3b3b3;
}
.onethird {
padding: 0 0 0 15px;
float:left;
width:30%;
}
.onehalf {
padding: 0 0 0 15px;
float:left;
width:47%;
}
.twothirds {
padding: 0 0 0 15px;
float:left;
width:64%;
}
.post_readmore {
margin:5px 0 0 0;
}
.post_readmore a {
text-decoration:none;
font-weight:bold;
color:#23353e;
}
#pagination {
margin:15px 0;
height:32px;
}
#pagination ul {
margin:0;
padding:0;
list-style-type:none;
}
#pagination ul li { float:left;}
#pagination ul li a {
float:left;
margin:0 5px 0 0;
padding:8px 0;
width:31px;
height:23px;
color:#fff;
text-decoration:none;
text-align:center;
font-weight:bold;
background-image:url(../images/pagination.jpg);
background-repeat:no-repeat;
}
#pagination ul li a.active, #pagination ul li a:hover {
background-image:url(../images/pagination_active.jpg);
background-repeat:no-repeat;
}
/*** comments *****************************************************************/
#comments {
margin:0 0 40px 0;
}
.comm_block {
padding:25px 0 25px 0;
border-bottom:1px solid #e7e7e7;
}
.comm_avatar {
float:left;
padding:3px;
width:50px;
height:50px;
background-color:#fff;
border:1px solid #e7e7e7;
}
.comm_meta {
float:left;
margin: 0 0 0 20px;
width:550px;
}
.comm_author {
font-size:16px;
}
.comm_text {
float:left;
margin: 0 0 0 20px;
width:564px;
line-height:18px;
}
.comm_even {
background-color:#fff;
}
#comm_form {
margin:20px 0;
}
/*** contact ******************************************************************/
#contact_txt {}
#google_map {
margin:5px 0;
border:1px solid #b3b3b3;
}
#contact_form {
margin:20px 0;
}
.err {
color:#BF2323;
}
/*** forms ********************************************************************/
.form_tb {
padding:3px;
width:400px;
height:18px;
border:1px solid #b3b3b3;
color:#254A59;
}
.form_ta {
padding:3px;
width:639px;
height:150px;
border:1px solid #b3b3b3;
font-family:Arial, Helvetica, Verdana, sans-serif;
font-size:12px;
color:#254A59;
}
.form_btn {
padding:5px 7px;
font-family:Arial, Helvetica, Verdana, sans-serif;
font-size:12px;
color:#fff;
border:none;
background-color:#fff;
cursor:pointer;
background-repeat:no-repeat;
width:114px;
height:33px;
}
/*** global *******************************************************************/
ul {
padding:0 0 0 30px;
list-style-type:square;
}
ol {
padding:0 0 0 30px;
}
a {
color:#03181F;
}
p {
margin:0 0 10px 0;
}
h1 {
margin:0 0 15px 0;
font-size:34px;
font-weight:normal;
}
h1 a {
text-decoration:none;
}
h2 {
margin:0 0 7px 0;
font-size:24px;
font-weight:normal;
}
h3 {
margin:0 0 5px 0;
font-size:18px;
font-weight:normal;
}
h4 {
margin:0 0 5px 0;
font-size:16px;
font-weight:bold;
}
h5 {
margin:0 0 3px 0;
font-size:14px;
font-weight:bold;
}
blockquote {
margin:20px 0 20px 30px;
padding:0 10px;
border-left:5px solid #dbdbdb;
}
strong {
font-weight:bold;
}
.hidden {
display:none;
}
.noborder {
border:none;
}
.noimage {
background-image:none;
}
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
view page source to see the home page. I dont have the footer in an incorrect div (that i can see) Please can someone far smarter than me see whats going on here. I have taken the footer apart, edited the style sheet a 100 different gut-shot ways, tried to recreate the page, ripped apart the wrapper and other sections... If I touch the height on the footer push, the whole footer moves to the center of the page... If I try to move around it, I get dead space between the end of the text and the beginning of the footer.... PLEASE someone show me what im missing, ive lost hair over this, and my laptop is about to find out if its impact resistant. Hi All - I've edited the post to try and define my problem a little better. I've also updated the code so it validates. I'm trying to convert a horrendous table layout into CSS. What I need to have is the logo on the left, and the text on the right. The text needs to move with the browser resize - but it needs to stop moving when it gets to be 425px from the left margin. Currently, it keeps moving with the browser but it doesn't stop at the 425px mark. It drops to the bottom, and eventually if you make the window REALLY small, it drops below the logo. I'm sure that I have just got the code all wrong. I guess what I need to know is how do I put a fixed element next to a fluid element and eliminate the drop from happening. What am I missing. This is my current code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Argh</title>
<style type="text/css">
body {margin: 0px; padding: 0; background-color:#ffffff;}
#header {height: 80px; width: 100%; background-image: url(icon_bg_grad.gif); background-repeat: no-repeat; background-attachment:fixed;}
#nav {clear: both; height: 25px; background-image: url(icon_grad2.gif); background-repeat: repeat-x; }
</style>
</head>
<body>
<div id="header">
<div style="width: 425px; float: left;">
<img src="logo.jpg" width="220" height="66" alt="logo">
</div>
<div style="float: right;">
<p>This is annoying</p>
</div>
</div>
<div id="nav">
</div>
</body>
</html>
Hi folks. I'm new to this forum, but I'm not new to CSS. I've inherited a little problem that was left behind by my client's original developer. Here is the code the makes up the header on my page: Code: <body> <div id="issingle"> <div id="container"> <div id="sitename"> <a href="http://www.nectardesign.com"><img src="http://www.nectardesign.com/blog/wp-content/themes/default/nectar-product-development.gif" border="0" alt="Nectar Product Development"/></a> </div> <div id="mainmenu"> <ul> <!--<li class=""><a href="http://www.nectardesign.com/blog">Home</a></li>--> <li class="page_item"><a href="http://www.nectardesign.com/about/">about</a></li> <li class="page_item"><a href="http://www.nectardesign.com/service/">service</a></li> <li class="page_item"><a href="http://www.nectardesign.com/category/all-products">portfolio</a></li> <li class="page_item current_page_item"><a href="http://www.nectardesign.com/blog/">blog</a></li> <li class="page_item"><a href="http://www.nectardesign.com/blog/category/news/">news</a></li> <li class="page_item"><a href="http://www.nectardesign.com/career/">career</a></li> <li class="page_item no_bar"><a href="http://www.nectardesign.com/contact/">contact</a></li> </ul> </div> And here is the css pertaining to that code: Code: body {
background:#fff;
color:#303030;
font: normal 12px /*Verdana,Tahoma,*/Arial, sans-serif;
margin:0 auto;
padding:0;
text-align:center;
width:850px;
}
#container {
position: relative;
background:url('http://www.nectardesign.com/images/headerbg.jpg') top center repeat-x;
color:#303030;
border:1px solid #C8C8C8;
margin:10px;
/* padding:10px;*/
text-align:left;
height:598px;
}
html>body #container {height: 1%; min-height: 598px;}
#mainmenu {
position: absolute;
right: 10px;
top: 27px;
margin-right: 5px;
}
#mainmenu li.page_item {
float:left;
/* height:35px;*/
list-style:none;
margin:0;
padding:0;
}
#mainmenu a {
border-right:1px solid #b0b0b0;
color:#808080;
display:block;
margin: 0;
padding: 1px 8px;
text-transform:lowercase;
}
Basically, this page's header looks correct in Firefox and Safari, but terrible in IE 5.x (Mac). Not only do the horizontal links (About, Service, Portfolio...) not show up correctly--they're actually on the left sidebar--but the repeating image doesn't repeat like it should. It doesn't even show up at all. Since I'm new, please don't hesitate to let me know if I'm forgetting to include any other important info. Thank you!! J Have a look at this page http://aenui.com/test/hg.html It is exactly the same as the wrapper-free holy grail layout as demonstrated on AListApart (http://www.alistapart.com/d/holygrail/example_4.html), except that I added 2 more divs in the center column. I floated the 2 divs to the left and I expect the 2 divs to start stacking side by side but no, it doesn't do that. Apparently this only happens in the holy grail layout. Does someone have a fix? I'd hate to abandon the otherwise elegant holy grail layout just because of this. I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
Hi, I would like to make a html 'button' tag of 'submit' type look and behave like a html hyperlink. (For those who would be curious, the reason is that I want to pass a variable to the target script, using the post method rather than appending a name-value pair to the hyperlink url, while keeping a conventional presentation. In the end, it should make the passed variable less visible for the end user, except of course if they look at the source code and look for a hidden input). I considered to use the CSS2 system colors codes, but I did not find a code for hyperlink, and anyway, system colors will be deprecated in CSS3, so it is no good idea if I want to make my pages portable in the far future. I tried to use the appearance property from CSS3, but it does not seem to be wel implemented yet in current browsers. For now, I just styled my html button, removing border, and setting the background and foreground colors to something similar to an hyperlink, but then I have no guarantee that this will match the actual look & feel in the end user's browser. Any hint or suggestion ? |
|||||||