|
CSS - Identical Code/css, Same Page, Different Results?
This is based directly off of Eric Mayer's pure css popups. I know he states in his img tutorial "...considering that even if we used the display: none/display: block trick in the SPAN-popup demo, Explorer has trouble.", but the fact I have it working flawlessly for the first piece of code gives me hope.
Of note -- for better or worse, I intentionally put IE6 in quirks mode with <?xml version="1.0"?> right before my doctype. I know it's not the best idea in the world, but it means my code works completely as intended for IE5/5.5/6, and all other browsers I've been able to test (firefix/opera -- windows). Code: HTML: <li><a href="#">F. A. Q.<span>We understand there's going to be some questions -- check here and you might find some answers or how-to's.</span></a></li> <li><a href="#">Help Desk<span>Couldn't find an answer to your question? Find a non-serious glitch or bug? Feel free to head to our support desk and create a ticket. We'll be in touch with you promptly about your question or concern.</span></a></li> <!-- Repeat, roughly 10 links, some of which are in submenus - all work as expected --> Code: CSS:
#mainMenu li a span { display: none; }
#mainMenu li a:hover span {
display: block;
position: absolute;
top: 152px;
right: 32%;
} /* For posting I removed the formatting tags like border, padding etc */
That works as expected. Upon rolling over the link, the span is displayed, positioned absolutely elsewhere on the page. On rollout, it hides again. However, when I cut and paste that CSS and change only the anchor i'm referencing: Code: HTML: <td> <a href="#" class="date"> 08/06/06<span>August 6th, 2006 -- 8:09am</span> </a> </td> <!-- I have roughly 20 cells identical to that, but with different dates. Yes, there's good reason for using tables :p --> Code: CSS:
a.date span { display: none; }
a.date:hover span {
display: block;
position: absolute;
top: 0px;
left: 0px;
}
a.date:hover { color: red; }
/* Again, I removed formatting */
It works as expected in everything except IE. I thought this is because IE doesn't like the fact i'm adding a class to the anchor... a.date:hover span ... but even when I remove the .date a:hover works and a:hover span doesn't. What's going on? Thanks in advance, Brett Similar TutorialsI can't figure out for a life of me why is out of two identical code only one of them plays nice with IE9. I'm a noob in coding CSS/HTML so any help/explanation would be greatly appreciated. Here is the two code as follows: Working in IE9: .boxed { border: 1px solid; border-bottom-color:#a5a5a5; border-right-color:#e1e1e1; border-top-color:#e1e1e1; border-left-color:#e1e1e1; background-color: #F2F2F2; padding: 15px 15px 15px 15px; margin: 10px 10px 10px 10px; -moz-border-radius: 9px; -webkit-border-radius: 9px; -khtml-border-radius: 9px; border-radius: 9px; -moz-box-shadow: 0px 8px 6px #000; -webkit-box-shadow: 0px 8px 6px -6px #000; box-shadow: 0px 8px 6px -6px #000; } Not working in IE9: .text-box{ border: 1px solid #ebebeb; background-color: #f5f5f5; /* filter:alpha(opacity=90); */ -moz-border-radius: 9px; -webkit-border-radius: 9px; -khtml-border-radius: 9px; border-radius: 9px; -moz-box-shadow: 0px 8px 6px -6px #000; -webkit-box-shadow: 0px 8px 6px -6px #000; box-shadow: 0px 8px 6px -6px #000; font-size: 12px; padding: 19px 9px 19px 12px; margin: 10px 10px 10px 10px; } Ok, I have basic CSS knowledge but need some help. Here's what I'd like to do: I take trips and post pictures on my site. I use lighthouse to display the images, so each image has a separate filename and caption, and each group of images has a separate group name. Under "Ski Trip", for instance, I'll have Img 1, "Skiing"; Img 2, "More skiing"; etc. It's relatively tedious to create page after page that uses the same format. I use CSS for style, the menu, and Lighthouse, but is there way that I could create a new page entitled "New ski trip.html" and in that file just have a list of the image filenames, captions, etc., that end up all using the same html format to display the images? I don't think I'm being terribly clear (sorry) ... big kudos to anyone who can help. I am having problems making the comments and upcoming shows show up. I want the friends and shows to show up under the first group of divisions div 5 and 6 - And I want the comments where the friends are now. Also I can not get anything that I embed to show up. I know it is because of the code to make the myspace music player play at the very end. I need the myspace music player there but I also want to embed my podcast and snowcap music player. Please help me out. Thanks. Click here to see page Here is my code: Code: <style type="text/css">
body table {margin-top:-5000px;}
body td table, body div table {margin-top: 0;}
table, tr, td {background-color:transparent;}
body div table form{display:none;}
body table div form{display:block;}
div table td font {visibility:visible;}
a.navbar:active, a.navbar:visited, a.navbar:link { color:ffffff; }
a.navbar:hover {color:ff0000}
.navbar{display: inline;}
a:active, a:visited, a:link, a:hover{ color:79889B; }
.blacktext10, table, tr, td, li, p, div { color:79889B; }
{text}
div, font, input, textarea, td{font-family:arial narrow
!important;font-size:10pt !important;text- bold!
color:ffffff; !important;}
.comt td, .comt table{width:0px!important; height:0px!important; background-color:transparent!important; border:0px!important; _padding:2px!important;} .comt .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a, .comt td .redlink{visibility:visible;} .comt td td td b{top:0px; display:inline;} .comt .orangetext15, .rid{display:none;} .comt td b, .blacktext10 {display:block;} .comt table, .comt td b, .comt .btext, .redlink{position:relative; top:-9px;} .comt {z-index:7;}
body {
background-color:000000;
background-image:url();
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
scrollbar-face-color:000000;
scrollbar-3dlight-color:000000;
scrollbar-shadow-color:000000;
scrollbar-darkshadow-color:000000;
scrollbar-arrow-color:79889B;
scrollbar-track-color:000000;
}
.banner {
background-color: 000000;
background-image: url('(URL address blocked: See forum rules));
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
position: absolute;
left: 50%;
margin-left: -486px;
top: 177px;
height: 137px;
width: 965px;
border: 0px;
overflow: auto;
z-index: 1;
}
.div1 {
background-color:000000; color:000000;
background-image:url((URL address blocked: See forum rules));
border:1px ridge; border-color:888888;
width:250px; height:1050px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-485px; margin-top:315px;
visibility:visible;}
.div2 {
background-color:000000; color:000000;
background-image:url((URL address blocked: See forum rules));
border:1px ridge; border-color:888888;
width:453px; height:350px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-230px; margin-top:315px;
visibility:visible;}
.div4 {
background-color:000000; color:000000;
background-image:url((URL address blocked: See forum rules));
border:0px ridge; border-color:888888;
width:448px; height:340px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%; padding: 4px;
margin-left:-228px; margin-top:1023px;
visibility:visible;}
.div3 {
background-color:000000; color:000000;
background-image:url((URL address blocked: See forum rules));
border:1px ridge; border-color:888888;
width:250px; height:1050px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:228px; margin-top:315px;
visibility:visible;}
.comt td, .comt table {
width:0px!important;
height:0px!important;
background-color:000000!important;
border:0px!important; _padding:2px!important;}
.comt .comt td, .comt table, .comt td a img,
.comt td td td a, .comt td b a, .comt td .redlink{visibility:visible;}
.comt td td td b{top:1375px; display:inline;}
.comt .orangetext15, .rid{display:none !important;}
.comt td b, .blacktext10 {display:block;}
.comt table, .comt td b, .comt .btext, .redlink { position:relative; top:-9px;}
.comt {z-index:7;} .orangetext15 { visibility:hidden;}
.comt {
position:absolute;
width:965px;
height:300px;
overflow:auto;
background-color:000000;
border: 1px solid gray;
top:1375px;
left:50%;
margin-left:-486px;
}
.blacktext10 {display:none;}
.comt { scrollbar-face-color:000000;
scrollbar-face-color:000000;
scrollbar-highlight-color:999999;
scrollbar-3dlight-color:000000;
scrollbar-shadow-color:006633;
scrollbar-darkshadow-color:000000;
scrollbar-arrow-color:00FF00;
scrollbar-track-color:000000;}
.comt td, .comt span { !important; font-family: !important; color:FF0000 !important; }
.comt a {color:FF0000 !important; !important; font-family:Majandra GD !important; text-decoration:none !important;}
.comt a:hover {color:FFff00 !important; !important; font-family:Majandra GD !important;}
a img {border:0px !important;}
</style>
<div class="banner">
</div>
<div class="div1"><center><br><br><font color="yellow"><b>Booking Information:<br>Critical Mass Music<br>J Barre<br>(404) 644-4742</b><br></font><center><a href="mailto:ebrowne77@gmail.com"><font color="yellow"><b>ebrowne77@gmail.com</b></font></a></center><br><br>
<a href=(URL address blocked: See forum rules)=invite.addfriend_verify&friendID=110852663>
<img src="(URL address blocked: See forum rules)" width="125" height="58" border="0">
</a>
<br>
<a href=(URL address blocked: See forum rules)=user&Mytoken=4DD43AA2-63F5-4D5E-B503AFA03396064621867986>
<img src="(URL address blocked: See forum rules)" width="125" height="58" border="0">
</a>
<br>
<a href=(URL address blocked: See forum rules)=user.viewPicture&friendID=110852663>
<img src="(URL address blocked: See forum rules)" width="125" height="58" border="0">
</a>
<BR>
<a href=(URL address blocked: See forum rules)=mail.message&friendID=110852663>
<img src="(URL address blocked: See forum rules)" width="125" height="58" border="0">
</a>
<BR>
<a href=(URL address blocked: See forum rules)=user.viewfriends&friendID=110852663>
<img src="(URL address blocked: See forum rules)" width="125" height="58" border="0">
</a><br>
<a href=(URL address blocked: See forum rules)=bandprofile.listAllShows&friendid=110852663&n=J+Barre>
<img src="(URL address blocked: See forum rules)" width="125" height="58" border="0">
</a><br>
<a href=(URL address blocked: See forum rules)=user.addToFavorite&friendID=110852663&public=0>
<img src="(URL address blocked: See forum rules)" width="125" height="58" border="0">
</a><br>
<a href=(URL address blocked: See forum rules)=block.blockUser&userID=110852663>
<img src="(URL address blocked: See forum rules)" width="125" height="58" border="0"</a>
<BR>
<a href=(URL address blocked: See forum rules)=user.viewComments&friendID=110852663&MyToken=f7d8ef58-6dd3-4d2d-b3b4-d1394c2aec1a>
<img src="(URL address blocked: See forum rules)" width="125" height="58" border="0">
</a>
<BR>
<a href=(URL address blocked: See forum rules)=vids.myvideos>
<img src="(URL address blocked: See forum rules)" width="125" height="58" border="0">
</a>
<BR>
<a href="(URL address blocked: See forum rules)" target="new">
<img src="(URL address blocked: See forum rules)" width="125" height="58" border="0">
</a>
<BR>
<a href="mailto:ebrowne77@gmail.com">
<img src="(URL address blocked: See forum rules)" width="125" height="58" border="0">
</a>
<BR>
<a href="(URL address blocked: See forum rules)=music&Mytoken=1232584F-A394-483A-99869640B802D9BD2832516" target="new">
<img src="(URL address blocked: See forum rules)" width="160" height="58" border="0">
</a></font>
<br><br><br>
<BR>
<a href="(URL address blocked: See forum rules)~117127" target="new">
<img src="(URL address blocked: See forum rules)" width="125" height="58" border="0">
</a>
</div>
<div class="div2">
<font size=2><b><font color=ffffff>
</font></div>
<div class="div3"><font color=ffffff> <center><font color="yellow">J Barre</font></center>
<br>
<center>
<img src="(URL address blocked: See forum rules)" width="100" height="250">
<br> <center><font color="yellow">Atlanta, GA <br> "A Lone Stallion Amongst Mules!"</font></center><center><br><br>
Comment Here<form method="post" action="(URL address blocked: See forum rules)=user.ConfirmComment"><input name="friendID" value="57340028" type="hidden"><textarea name="f_comments" style="width: 150px; height: 100px; background-color: FFFFFF; color: 000000; font-family: arial; font-size: 10px; border: 1px solid 000000; ">Holla at Your BOY!!! </textarea><br /><input type="submit" value="Post" /></form><br><a href="(URL address blocked: See forum rules)=user.viewComments&friendID=110852663" target=_blank>View/Edit Comments</a></center>
<BR>
<center><A
href="(URL address blocked: See forum rules)" target="new"><img
border="0"
src="(URL address blocked: See forum rules)" width="180" height="20"></A>
</center>
<br><br>
<center><a href="(URL address blocked: See forum rules)=3091027"><img src="(URL address blocked: See forum rules)" border="0"></a></center><br>
</div>
<div class="div4">
<center><img src="(URL address blocked: See forum rules)">
<br></center>
<div style="text-align:justify; text-justify:distribute-all-lines;>
<font size=2><b><font size="2" color="red">Hailing from Tulsa, Oklahoma, the man formerly known as "E.B." or "Encyclopedia Brown," is blazing a trail in hip-hop back to its essence: originality, thought, and struggle. Many are saying his timing couldn't be better. Heavily influenced by hip-hop, while it was still in his infancy, J Barre was founding member of the Def Boy breakin' crew. Soon after, he began honing his skills as a beat boxer which sparked his ambition to become an emcee. His first recording goes back to the age of 9. He developed his charismatic stage presence and experience from numerous talent shows and mic battles. After attending Howard University in DC, he went back home to Tulsa,OK and helped to form and establish the underground super group Medu Netr in 1998. Grindin' and building his technique and further feeding his passion for hip-hop, J Barre became one of the most seasoned and well known MCs in Oklahoma. Migrating to Atlanta, GA in 2002, J Barre set out to get his skills marketed in the right direction. J Barre has performed in Harlem, New York to L.A., California and is currently preparing for a promotional tour for his freshman solo project due out Summer 2007. His determination to preserve the traditions of hip-hop, and his raw talent, help him easily exceed competitors...he is a lone stallion amongst mules.</div>
</font></div>
<style>td td object {position:absolute;left:272px; top:672px;}</style>
</td></tr></table></td></tr></table> <div class="comt"><table class="off"><tr><td><table><tr><td>
How would i align all of the body content on a webpage to the right using CSS? I have the following in my html: PHP Code: <p><a href="mempage.php?do=layout"><span style="margin-right:125px;">Profile Colors</span><span style="background:#<? echo $memsettings['primarycolor']; ?>; height:10px; padding:0 5px; margin-right:2px;"></span><span style="background:#<? echo $memsettings['secondarycolor']; ?>; height:10px; padding:0 5px;"></span></a></p> In FF it shows two small squares with the colors next to "Profile Colors" but in IE it shows nothing. No squares, no colors, just the "Profile Colors" text. Any suggestions? PLEASE HELP Okay this is kind of blowing my mind. Here is my CSS: Code:
body
{
margin: 0px;
text-align: center;
}
table
{
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
}
td
{
padding: 0px;
vertical-align: top;
}
td.banner
{
background-image: url("images/design/BANNER_TOP_LEFT.jpg");
background-repeat: no-repeat;
width: 597px;
height: 70px;
}
td.map
{
background-image: url("images/design/MAP_BACKGROUND.jpg");
background-repeat: no-repeat;
width: 203px;
height: 199px;
}
td.content
{
height: 100%;
background: red;
}
here is my XHTML 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></title>
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<table width="800">
<tr>
<td class="banner">
<div id="login">
<p>
Hello
</p>
</div>
</td>
<td rowspan="2" class="map">
<p>Hello</p>
</td>
</tr>
<tr>
<td class="content">
<div id="contest">
<p>Hello</p>
</div>
</td>
</tr>
</table>
</body>
</html>
Here is what it looks like in each brower (attached). I want every browser to look like it does in Chrome.... I don't understand why the others are different? Thanks... (haven't been at developing for a while). Does CSS have any effect on the way search engines crawl your page? Like if I had some description text I wanted to have on my page, but didn't want it to be part of my design. Could I just put it in a div and move it off the screen with CSS? Would that text still be beneficial to search engines? I am generating a list with PHP that is going to be printed out and hung up for display. I would prefer if the following weren't printed. 1) Top Left - Page Title (I know I can have this disappear by having a blank title, but I would prefer to have one) 2) Top Right - Page URL 3) Bottom Left - Page number (ex: 1 of 2) 4) Bottom Right - Date Is there any way to print the list without these? I wasn't sure if there is some css I can use, or if this is something that the printer prints automatically. Thanks Hi everyone, I am new to this website as well as CSS for the most part. I have been working on a wordpress themed website recently trying to learn as much as possible. My website is self-hosted currently so can't really give you a link to view my code. I just discovered the CSS validator and I validated my CSS file. It contains 13 errors (yikes!) and 16 warnings. However, I don't really know how to interpret it. I use notepad++ as an editor. The profile I used is CSS level 2.1: EDIT: Here is the new code for CSS 3. I only copied the errors part. Code: 23 .socialmedia img Property -webkit-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 24 .socialmedia img Property -moz-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 25 .socialmedia img Property transition doesn't exist : all 0.2s ease all 0.2s ease 38 .socialmedia img.fade:hover Property -moz-opacity doesn't exist : 1 1 39 .socialmedia img.fade:hover Property -webkit-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 40 .socialmedia img.fade:hover Property -moz-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 41 .socialmedia img.fade:hover Property transition doesn't exist : all 0.2s ease all 0.2s ease 60 #main-nav-search Value Error : padding-top -1.0 negative values are not allowed : -1px -1px 79 .menu2-top-right Value Error : border Too many values or values are not recognized : solid 0 1px 1px 1px #000 solid 0 1px 1px 1px #000 80 .menu2-top-right Property -moz-border-radius-bottomright doesn't exist : 10px 10px 10px 10px 82 .menu2-top-right Property -moz-border-radius-bottomleft doesn't exist : 10px 10px 10px 10px 87 .menu2-top-right Property -moz-box-shadow doesn't exist : 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 88 .menu2-top-right Property -webkit-box-shadow doesn't exist : 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f What does it mean when it says "doesn't exist"? I'm trying to learn this CSS thing (driving me crazy!!) and I'm having problems. I validated my HTML (using HTML 4.01 Transitional) and it came back 100% perfect. I validated the CSS, and I did as many of the corrections as I could figure, and I got back this when I re-validated the .css file: Quote: To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML. Warnings URI : file://localhost/U:\iQuire2\stylesheets\indexstyles1.css Line : 15 (Level : 1) You have no background-color with your color : a:link Line : 16 (Level : 1) You have no background-color with your color : a:hover Line : 18 (Level : 1) You have no background-color with your color : a:visited Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 This is my .css file as it stands now: css Code: Original - css Code body {background:#ffffff; color:#000000; padding:0 0 0 0; margin:0 0 0 0; width:100%;} /* Page DIV Tag Stylesheet Codes */ div { position:absolute; top:1px; right:90%; bottom:auto; left:0px; } /* Hyperlink 'a href' Tags Handling */ a:link {color:#0000ff; background:transparent; font-weight:bold; text-decoration:none;} a:hover {color:#0000ff; background:transparent; font-weight:bold; text-decoration:underline;} a:active {color:#0000ff; background:#ffff00; font-weight:bold; text-decoration:none;} a:visited {color:#800000; background:transparent; font-weight:bold; text-decoration:none;} /* Text Formatting Primary Tags */ h1,h2,h3,h4,h5,h6 { font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#000080; } h1,h2,h3 {text-align:center;} h4,h5,h6 {text-align:left;} h1 {font-size:2em;} h2,h4 {font-size:1.5em;} h3,h5 {font-size:1em;} h6 {font-size:.75em;} p { font-family:TimesNR, Times, serif; font-size:.875em; text-align:left; } p.ctr { font-family:TimesNR, Times, serif; font-size:.875em; text-align:center; } p.arial { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:left; } p.arialc { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:center; } p.footertxt { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:center; font-weight:bold; } p.fineprint { font-family:Arial, Helvetica, sans-serif; font-size:.5em; text-align:center; font-weight:bold; } p.breadcrumbs { font-family:Arial, Helvetica, sans-serif; font-size:.5em; font-weight:bold; text-align:left; } /* SPAN Tag Text Formatting */ span.bold {font-weight:bold;} span.ital {font-style:italic;} span.und {text-decoration:underline;} span.boldital {font-weight:bold; font-style:italic;} span.boldund {font-weight:bold; text-decoration:underline;} span.bolditalund {font-weight:bold; font-style:italic; text-decoration:underline;} span.italund {font-style:italic; text-decoration:underline;} /* List Formatting */ ul {text-align:left;} li {font:normal bold normal .75em Arial, Helvetica, sans-serif;} /* Table Formatting */ table { border-width:0px; width:auto; } td { border-width:0px; width:auto; text-align:left; vertical-align:top; } table.topbanner { border-width:0px; width:100%; } td.headrlogo { border-width:0px; width:156px; text-align:center; vertical-align:middle; padding:2px; } td.headrtxt { border-width:0px; width:90%; text-align:center; vertical-align:middle; padding:2px; } td.headrbuttons { border-width:0px; width:auto; text-align:center; vertical-align:top; padding:0; background-image:url(blugradient_50x25.jpg); } table.buttontb { border-width:0px; width:auto; margin:0 0 0 0; } td.butntoplvl0 { border-width:0px; padding:1px; width:115px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:9pt; text-align:center; vertical-align:middle; } td.butntoplvl1 { border-width:0px; padding:1px; width:115px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:9pt; color:#ffffff; text-align:center; vertical-align:middle; background-color:#5984c8; } table.tborder { border-width:1.5px; border-style:solid; border-color:#000080; width:auto; margin-right:auto; margin-left:auto; } td.dborder { border-width:1px; border-style:solid; border-color:#000080; text-align:left; vertical-align:top; } td.dborderctr { border-width:1px; border-style:solid; border-color:#000080; text-align:center; vertical-align:middle; } table.footer { border-width:2px; border-style:solid; border-color:#000080; width:100%; } td.footertd { border-width:0px; width:auto; text-align:center; vertical-align:middle; padding:8px; }
With how it's written currently, it looks great in Microsoft Internet Explorer 6x. But when I try to bring up the same page that looks so well in IE in Netscape or Mozilla Firefox, everything becomes "squished" to the left-side of the browser window. So, for someone who's more comfortable with .css than I am (I'm working from books), can you tell me where I went wrong in this thing? I can understand if the hyperlink formatting might not be "up to code" so to speak (warning from W3C CSS Validator above), but would it affect the formatting of the entire document?? I want to avoid forcing the layout into a specific width, so I tried using percentages and "auto" for styles so that it will be a fluid layout. As I said, IE shows it just the way I want it to look. Firefox & Netscape squash everything down as if there were no formatting whatsoever. Do I need to have separate .css code for each browser?? I don't have a Mac, but my boss does and I'm sure he'll want the site to look good working through Safari too (can't test it) HELP!!! I am using float to create a two column layout. When I included a <p> tagged with some emphasized <em> text in the center column, it causes some of the content on the left column to disappear. If the emphasized text isn't in its own <p>, the problem doesn't happen. Furthermore, it only happens with IE7 and not FF. Does anyone know why this strange behavior? Thank you http://tapmeister.com/layout_test/e...s_question.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Funny Behaviour</title>
<style type="text/css">
* {margin: 0; padding: 0;}
body {background-color: white}
#wrapper
{
width: 100%;
background-color:lime;
margin: auto;
}
#content {background-color: blue;}
#main
{
margin-left:180px;
background-color: yellow;
}
#side1
{
width:180px;
float:left;
background-color:purple;
}
</style>
</head>
<body id="page_bg">
<div id="wrapper">
<div id="content">
<div id="side1">
<p>Left column. Left column. Left column. Left column. Left column. Left column. Left column. Left column. Left column. Left column. Left column. Left column.</p>
</div>
<div id="main">
<p>First do not have a dedicated p tag for the emphasised stuff.<em>Some emphasised stuff</em>Some stuff.</p>
<p>Now do have a dedicated p tag for the emphasised stuff.</p>
<p><em>Some emphasised stuff</em></p>
<p>Some stuff.</p>
</div>
</div>
</div>
</body>
</html>
Hey all.. I'm still new to CSS in general, but know how it works. Anyway, I'm trying to get an element in a DIV to display properly, but for some reason, it isn't Code:
.contenthead {
background-image: url(player/images/player_03.gif);
background-repeat: repeat;
height: 50px;
color: #000000;
font-weight: bold;
font-size: 40px;
}
The result is at http://www.fairfieldmediacoop.com/fpactest/play.php?recordID=hO2GmjtlvSJKBgcqp4LZ The only thing I can think of is that the text I am trying to enlarge, which is the "Chamber Talk" in black above the video (center of the strip under the header) is encased in a Table. Would that cause it not to listen? This should be easy, but I think I'm getting screwed by how the browsers are loading and layering the css. Here's my code: Code: <a href="/somepage" class="WhiteTextClass">somepage</a> The anchor tag sets the link color to blue. My WhiteTextClass then sets it to white. This works. However, the visited link color is assigned as the same blue. When the link is visited it no longer takes the white color the class is assigning, it's going back to blue. Am I right that it's the browser and the order it applies the css attributes, or am I doing something wrong? Hi, I have given each column an id. I place the cloumn divs in a wrapper div named #row Code: .row{
position:absolute;
display:inline;
width:893px;
height:20px;
margin:5px,5px,0px,5px;
}
each div has code that looks like this: Code: #RISK_SCORE{
position:relative;
display:inline;
left margin:5px;
float:left;
width:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:9pt;
font-weight:normal;
}
But each column stacks up on the next, instead of lining up in a row. Can anyone tell me what I'm doing wrong? thanks -S I keep reading how GREAT CSS is but I think it SUCKS!!! I have been going bonkers trying to figure out how to do what I want in CSS rather than do it the easy way with tables. If I can't get some help that actually let my page do what I want I think I will be forced to go back to tabular format. My page is here. My CSS is here. I've got the banner and the menu working fine. The look great. But now I'm working on the main content of the page. I want to have three different sections. The three divs are news, calendar, and main I want news and calendar to be on top with the main underneath both. What I wont always know is how much content is in either the news or the calendar. Sometimes the news section will be longer sometimes the calendar section will be longer. But in either case I want the Main section be be BELOW BOTH sections on the page. At first I could get it to work when the news div had more content. But not if it had only a small amount of content. So I posted on this site here. . Well it worked well enough after that. Not perfect but at this point I'll just be happy if things aren't overlapping eachother. So now I went back and added more content to the news section and it doesn't work. Now the Main section rides up and under the calendar section. WHY WHY WHY???? Someone PLEASE prove to me that CSS is worth all of this agrivation. I don't care how "good" CSS is supposed to be if I can do it with tables and NOT with CSS then what is the point??? Hi All: When i use <ul><li> and <li> is set to "list-style-type: none;" IE and Firefox renders it differently. Does anybody know a work-around for this? The good example of this and the CSS code is at following holzgreen.com/list-test/ HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>List Test 1</title> <meta name="Description" content="x.x.x. CHANGE .x.x.x"> <meta name="KeyWords" content="x.x.x. CHANGE .x.x.x"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META name="Publisher" content="Firework Studio"> <META name="revisit-after" content="15 days"> <META name="robots" content="index, follow"> <META name="Robots" content="All"> <link href="000-style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style1 { font-family: "Courier New", Courier, monospace } --> </style> </head> <body> <div #none> <ol> <li>List item - 1</li> <li>List item - 2 <ol> <li>LI - 2.1</li> <li>LI - 2.2</li> </ol> </li> <li>List item - 3</li> <li>List item - 4</li> </ol> </div> </body> </html> CSS: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; border: 1px solid #000000; margin: 0em; padding: 0em; } #none ol { background: #BB0000; list-style-position: inside; margin: 0em; padding-left: 1em; /* Moves the Whole List */ } #none ol ol{ background: #BB00BB; list-style-position: inside; margin-left: 0em; padding-left: 3em; /* Moves the Nested List */ } #none ol li { background: #BBBB00; font-size: .8em; margin-left: 0em; list-style-type: none; } #none ol ol li { background: #00BBBB; font-size: 1em; list-style-type: lower-alpha; margin-left: 0em; list-style-type: none; } Thanks for your interest I am at a total loss on this one. I'm trying to create a simple inline unordered list menu - no problems there - I've done that plenty of times. However, this time I would like my menu to have a border around it instead of being a plain box. As soon as I add the 'border-style:solid' modifier to the div, the text misaligns straight down, roughly 15px lines, out of the box. This happens on Firefox (and apparently on Opera as well, though I haven't checked that one myself). At this point I've stripped the page to bare bones, switched from transitional to strict, tried float vs not, tried margins vs 0 margins, and padding vs 0 padding, relative vs absolute, and attempted to manually shift the text through negative positions as well. No joy. Css: Code: /* Navigation */
#nav {
width: 821px;
height: 18px;
border: 1px;
border-style: solid;
border-color:red;
}
#nav ul {
}
#nav li {
display:inline;
float:left;
background-color:#9E0C0C;
text-align:center;
color:white;
font-family: arial, san-serif;
font-size: 14px;
font-variant: small-caps;
}
and page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" > <link href="style.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div id="nav"> <ul> <li>Home</li> <li>XXX</li> <li>XXX</li> <li>CCC</li> <li>HHH</li> <li>JJJ</li> <li>kkk</li> <li>KKK</li> </ul> </div> </body> </html> (As I said, I've stripped it to absolutely nothing else.) Any suggestions would be welcome. (ETA: Also tried changing text size in case a too-large font size was making the text 'pop out' of the box. That is also not it.) Hi All : Currently i'm running in .NET platform together with VB.net and ASP. I faced a problem regarding to the PAGE BREAK html tag. The problem is when i want to print out a report, it will show with scroll bar and the report is very long. So what i have to do is to apply Page-Break-After/Before into the HTML. how am i know if the report already apply the Page Break function or not? And the only style i can use is CSS. Anyone familiar with this? It's urgent !! Hope can get anyone help asap. Regards, JeFFery I am trying to make a pattern tile the full height of the page and match up with an image at the top. It's a little bit hard to explain and a lot easier to show, so I've documented my first two attempts below. Failed Solution 1 - Pattern as a part of a div set at height: 100%; with outer divs also set at height: 100%; See attempt 1: Code: http://www.hesterdesigns.com/Web2/yellow.html Problem is that the divs aren't growing to the height of the page, and so the pattern isn't tiling the whole height of the page. Failed Solution 2 - The Pattern is part of the body background which tiles on y. See attempt 2: Code: http://www.hesterdesigns.com/Web2/index.html Any suggestions? I'm hoping to find a way to do this using only CSS and without having to resort to Javascript solutions. Howcome: html, body { color: #06F; background-color: #000; font-size: 16px; text-align: center; width: 768px; } Doesn't center the page in the browser? How can I center it? Output example on my website here. |
|||||||