|
CSS - Still Fighting A Couple Msie Bugs
Two issues I could use some help on, if anyone is willing to assist:
One: I'm once again finding myself at a loss to correct an odd CSS rendering anomoly that shows up (of course) only in MSIE6 and it's Mac counterpart (but more severely in IE6/Win). Basically, I'm using the negative margins method (described here in an article we probably all know on ALA). This combines neg. margins with Dan Cedarholm's Faux Columns to create a nice two-column layout with a footer that always clears regardless of which column is longer. It could be done fluidly, but this site calls for fixed width @ 760px, so it's in a viewport div. The problem is, I'd like to extend a border {1px solid #eee} between the two columns. I assumed based on my code that I would simply apply a right hand border to the content div, and that (regardless of the non-semantic wrapper div used to keep things kosher with the faux columns) that would draw the necessary line. This seems to have worked fine (with a swap of margin for padding at the bottom of the content div, to keep the area contiguous to the footer). But in IE 6, I noticed a gap at the bottom of the page even with 0 margin. I assumed I was missing somethiing obvious like a whitespace bug for it to work in everything but IE, but alas no -- I can't find the source so I'm hoping one of you pros may do what I can not. Two: Secondly, I'm having endless problems with the "Story Options" <UL>. No matter what I try, I cannot get a consistent alignment of bullet-to-list text accross browsers. Every single one is at least one pixel different. Right now is the closest I can get things to working using background images instead of list-style-image, but frankly I'm near giving up and using a character and just scrapping the custom bullet altogether. Sadly, I may have found a solution earlier but it breaks IE5/Mac which (among other problems) doesn't seem to like background-position definitions, or at least the ones I tried. I sorta need IE5 mac support even though I would otherwise not care, because the office of the content providers for this site is entirely OS9 Mac based. Ick. If anyone knows a solution to this problem off hand though, I would seriously appreciate it before I jump off the roof Here's the code: Click here to see the template. Click here for CSS. Thanks in advance. This really should be the final nail the darn coffin for this project's CSS templates. Then I can get back to the warm snuggle of PHP -- Aiden Just so I don't feel like a moron in front of the pros: I'm totally aware I should be using an inline list with :hover for the navbar, and I'm also aware how much better my unstyled content would look if I used semantic definitions for headlines and such. The reason for the former is deadline and the fact that the current system works on every browser I've tested with - more than I can say about most of this code. The second is because <Hx> spans have an inherited top/bottom margin that extends beyond style, the only way I have found to override being negative margins. Unfortunately, IE6/Win doesn't read these right and screws the whole thing. Thus, I'm using non-semantic proprietary classes for the headlines/subheads, and perfectly OK with that for this project since it works and let's me keep the ledding nice and tight the way the client wants it. Similar Tutorialsfor some reason in firefox it's putting the second data cell in my table in the next row that doesn't exist, it displays perfectly in IE, and I've triple checked my html, anyone have any ideas?? www.entsource.com/hcs I'm trying to avoid using absolute positiioning as much as possible. I want to use paddings and those kind of things. So far I've been able to do what I want. A Problem Now. Why are the words with lines above them messing up so horribly? I have a workaround in mind, but I hate to use it... The code is a little disjointed right now. Don't mind that. CSS Code: Original - CSS Code body { padding: 0px 0px 0px 150px; } #leftSide { position: absolute; height: 100%; width: 155px; top: 0px; left: 0px; background-image: url("Images/SideImages/left.gif"); z-index: 0; } #rightSide { position: absolute; height: 100%; width: 155px; top: 0px; right: 0px; background-image: url("Images/SideImages/right.gif"); } #navLayout { width: 800px; height: 500px; border-style: dotted; border-color: lightblue; align: center; } #mainImage { width: 639px; height: 62px; padding-left: 30px; align: center; } .NavButtons{ padding: 0px 0px 0px 0px; margin-top: 20px; overflow: none; } #educationButton { width: 100px; height: 200px; } #education { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 130px; height: 47px; } #businesses { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 120px; height: 47px;
body {
HTML Code: Original - HTML Code <body> <div id="leftSide"></div> <div id="rightSide"></div> <div id="navLayout"> <div id="mainImage"><img src="Images/Layout/nandw.png"></div> <div class="NavButtons"> <img src="Images/Layout/education.png" id="education"> <img src="Images/Layout/businesses.png" id="businesses"> <img src="Images/Layout/opportunities.png"> <img src="Images/Layout/recreation.png"> <img src="Images/Layout/environment.png"> </div> </div> <body> <div id="leftSide"></div> <div id="rightSide"></div> <div id="navLayout"> <div id="mainImage"><img src="Images/Layout/nandw.png"></div> <div class="NavButtons"> <img src="Images/Layout/education.png" id="education"> <img src="Images/Layout/businesses.png" id="businesses"> <img src="Images/Layout/opportunities.png"> <img src="Images/Layout/recreation.png"> <img src="Images/Layout/environment.png"> </div> </div> Sorry for a link and not pasting but code but I want to be sure not to miss anything out ... There should be a menu item at the top of the page of: http://egg.epicdesigns.co.uk/home/index.php It shows up fine in Mozilla and Opera but not MSIE. Code: #menu {
z-index:1;
left:auto;
top:272px;
position:absolute;
width:631px;
margin:0px 0px 0px 12px;
padding:0px;
font:normal 110% agency fb,arial,sans-serif;
}
I notice that if I remove the <HEAD> tag int he HTML or the FLOAT:RIGHT styling on #sidebar then thigns show up as expected. Thanks in advance. As expected, Firefox displays my website perfectly, but I have a couple of major problems with MSIE and one or two with Chrome, but I'm hoping there's an easy to fix for these issues. The site is cinemasight.com In MSIE, there is a "scroll bar" over on the right. I do not know what's causing it or how to get rid of it. The other item is the <h2> headers are overlapping the comment "bubbles" (these have a link to the comment section of the post and list the number of comments there) on the right-hand side of the individual posts both on the front page and within each post individually. Another issue is in the post labeled Film Fun Friday #19 (and all previous ones tmk. In Chrome and Firefox, the two posters in the Identify the Poster game are centered in their table cells, but in MSIE, they are left-aligned. The final problem (that I can think of/identify at the moment) is in Chrome. Whereas in MSIE, the comments bubble is hidden behind the <h2> tag, in Chrome, it's actually sitting above, largely because in order to get it to display correctly in firefox, I had to use negative margins to pull it up to display on top of the header tag. So, I don't know if this can be resolved separately and individually with Chrome or if there's a better way to do it to display correctly in both it and Firefox. Any help that you guys can provide would be appreciated. Actualy, while I'm at it, there are a couple of other Hi! I have a css file (validated) which contains: Code: TD.p1{ text-align: left; background-image: url('http://local/adres/img/szablon/1/g_1.gif'); }
this works properly with Opera 7.54, Mozilla, but it doesn't work with MSIE! Only in MSIE I can't see the background image. Does anybody knows what may be wrong? MSIE version: 6.0.2600.0000 I'm sure this can be fixed... But I'm not sure how! I was doing the final adjustments and cross-browser tweaking when I stumbled upon this issue... I'm using a CSS with the following background tag: Quote: background: #E8E9EA url(img/test.png) repeat-x 0 8px; My PNG is 32bits, and of course, this works OK in Firefox, etc.. But not in MSIE! ( tested under 6.0.2900.x ) - Instead of correctly blending the PNG with the table background, it displays full white rects as backgrounds. I tried a few ms-ie "holy" fix scripts, etc. None of them worked on this special case. Any ideas?. I wouldn't like to work-around this one... Thanks. Greetings. I have an annoying strange behaviour with MSIE 6.0 (unfortunately, this is the official browser in our company..). When a div object appears (with a list of valid values), select tags will stay in front. With Firefox 2.0 and Safari this doesn't arrives.. all is perfect. I am working on Windows XP sp2. I prepared a simple page to show you, but here I cannot insert urls nor images.... :-( I will be very happy to receive your feedback. Safe paths, Stefano I am having a lot of trouble trying to get my new design to work correctly in Internet Explorer 6, which sadly around 15% of my visitors still use It has been breaking the top navigation bar and instead of having the tabs appear horiziontally it has had them vertically, messing up the header. It also seems to be breaking the content sections, so that the right content section appears below the left sideblock. Then there is an annoying bug with a small div I use to separate the menu list on the sideblock. I really wish I didn't have to support IE6, but so many visitors use it I really can't not. I'm not the best at CSS, but I don't think my code is that buggy as it works correctly in the latest versions of Opera, Firefox & Safari, as well as IE7 & IE8. The site is he http://beta.the-big-bang-theory.com. Many thanks for any assistance. http:// bluedesign.shaheenwebdesign. com/ Username: access Password: 123456 The slideshow and the welcome letter are next to each other (slideshow on right, letter on left) in Firefox as they should be, but when viewed in IE, the slideshow takes over and the letter is pushed down the page to below the slideshow. Also, my navigation menu links appear higher on the page in IE. I can't figure it out, help please! Code:
<div id="mainContent">
<br />
<div id="wrapper2">
<div style="position: relative; float: right;">
<jdoc:include type="modules" name="left" />
</div>
<div id="WelcomeLetter">
<h1> Force Training And Equipment</h1>
<p>If you're looking for a wide selection of Guns, Scopes and other Accessories then you've come to Force Training and Equipment. Serving Central PA and beyond since 1989, Kirk knows how to treat you, the customer, and is here to answer any question you may have about weapons. Please look at our Specials and Inventory to see what we have to offer!
</p>
</div>
</div>
Code:
.oneColElsCtrHdr #mainContent {
padding: 0 20px;
background: #ffffee;
}
#wrapper2 {
width: 980px;
margin: 0 auto;
}
#WelcomeLetter {
position: relative;
border: 1px solid #1d4873;
width: 350px;
font-family: Arial;
color: #000000;
line-height: 2em;
margin-top: 3px;
padding: 0px 10px 0px 10px;
}
I am redesigning my website at this location: http://www.brovizion.com/newsite. I have 3 little bugs that are driving me crazy: 1. (http://www.brovizion.com/newsite)(all pages) #mainNav won't put the background color all the way across the div on FF or Netscape. IE does take the dark blue background color all the way accross the page, but I don't know why the other two wont. I like the looks of it both ways, but still want to know why it is behaving weird. 2. (http://www.brovizion.com/newsite/portfolio.html) (IE only) For some reason the table in the middle of the page is pushing the left-most column out its position. This is not happening in FF or Netscape. Am I missing something simple? 3. (http://www.brovizion.com/newsite/contact.html) (IE only) The background color I've set for the fieldset tag is continuing upward approx 1 em. It is not happening in the other 2 browsers? Anyone know a simple hack to fix this? While we're at it, I know this isn't CSS related, but regarding (http://www.brovizion.com/newsite/contact.html), how come FF is making the input fields for "name" and "email" that light yellow color? Is there a way to get rid of it? Thanks in advance to anyone who has any ideas on how to fix these items? I have some layout issues.....one in FF, and one in IE.... I have a set of nested div's. One main one that applies a 2px solid black collapsable border. In side are two more divs of equal height. One floated left, and one floated right. In FF, they display perfect except that the border of the main div does not extend all the way to enclose both of the divs that it contain. In IE, the div that I have floated right appears centered beneath the first div instead of next to it. Here is the relevant XHTML 1.1 code (I've added the <base> tag so you can recreate this locally): html4strict Code: Original - html4strict 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" xml:lang="en" lang="en"> <head> <title>Welcome to Foltzconstruction.com</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en-US" /> <link rel="stylesheet" href="newstyles.css" /> <base href="http://www.foltzsconstruction.com"> <script type="text/javascript"> var revert = new Array(); var inames = new Array('about', 'gallery', 'services', 'estimates', 'test', 'contacts'); // Preload if (document.images) { var flipped = new Array(); for(i=0; i< inames.length; i++) { flipped[i] = new Image(); flipped[i].src = "images/"+inames[i]+"2.jpg"; } } function rollover(num) { if(document.images) { revert[num] = document.images[inames[num]].src; document.images[inames[num]].src = flipped[num].src; } } function rollback(num) { if(document.images) document.images[inames[num]].src = revert[num]; } </script> </head> <body> <div ID="main"> <div ID="header"> <h1><a href="index.html"><IMG SRC="images/title.jpg" WIDTH=775 HEIGHT=53 ALT="Welcome to Foltzconstruction.com" /></a></h1> <div ID="navbar"> <a href="about.html" onmouseover="rollover(0)" onmouseout="rollback(0)"><img name="about" src="images/about1.jpg" width=274 height=54 border=0 alt="about us" /></a> <a href="gallery.html" onmouseover="rollover(1)" onmouseout="rollback(1)"><img name="gallery" src="images/gallery1.jpg" width=274 height=32 border=0 alt="photo gallery" /></a> <a href="services.html" onmouseover="rollover(2)" onmouseout="rollback(2)"><img name="services" src="images/services1.jpg" width=274 height=31 border=0 alt="services" /></a> <a href="contacts.html" onmouseover="rollover(3)" onmouseout="rollback(3)"><img name="estimates" src="images/estimates1.jpg" width=274 height=31 border=0 alt="estimates" /></a> <a href="tests.html" onmouseover="rollover(4)" onmouseout="rollback(4)"><img name="test" src="images/test1.jpg" width=274 height=31 border=0 alt="customer testimonials" /></a> <a href="contacts.html" onmouseover="rollover(5)" onmouseout="rollback(5)"><img name="contacts" src="images/contacts1.jpg" width=274 height=67 border=0 alt="contacts" /></a> </div> <h2><img src="images/m3.jpg" width=501 height=179 alt="" /><a href="pom.html"><img src="images/project.jpg" width=501 height=67 border=0 alt="project of the month" /></a></h2> </div> <div ID="headline"> <img src="images/aboutbar.jpg" alt="About Us" /> </div> </div> </body> </html>
And here's my current stylesheet: css Code: Original - css Code body { padding: 10px; margin: 0; background-image: url(images/wood120.jpg); font-family: Verdana; font-size: 12px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #525252; } #main { margin: 0 auto; width: 775px; border-width: 2px; border-spacing: 0px; border-style: solid; border-color: black; border-collapse: collapse; position: relative; top: 10px; height: *; } #header { width: 775px; margin: 0; padding: 0; font-size: 1px; height: 189px; } #navbar { width: 274px; height: 246px; float: left; } #headline { width: 775px; height: 47px; } h1 { width: 775px; margin: 0; padding: 0; height: 53px; } h2 { width: 501px; height: 246px; margin: 0; padding: 0; float: right; } a img { border: none; }
Hi, Does anyone have any Ideas how to fix the two rendering bugs shown in the screenshots below? In IE5.5 The two top bars that stretch across the screen stretch too far distorting the page slightly. (Circled in red). http://www.explosiveracing.net/test/render_bugs/ie55.jpg In NN6 the backgrounds on the table cells do not fill correctly looking unsightly. (Circled in red). If you compare this to viewing the site in FF then you can see what I mean http://www.explosiveracing.net/test/render_bugs/nn6.jpg Site: http://www.explosiveracing.net/test/ hello! You help in solving a few minor problem on my project would be greatly appreciated! site is he http://pnlab.soundwebdev.com/changetheme-xSixteen.phtml Issues: 1) right-side content box does not move flush to top ov div in non-IE browsers. 2) links in the 'clockblock' are wrong color in IE only. CSS tells them to be silverish. 3) footmenu links (footmenu directly below clockblock) are the wrong color in IE only. CSS tells them to be grayish. I have toyed with just about evrything I can think of for these three items. Any help would be greatly appreciated! Yesterday I was able to get my page to validate with strict XHTML and get it looking exactly how I want it to in Firefox: http://www . restonheights . com/ However, the design falls apart a bit in IE6. Viewing in it IE6 causes the feedback div to grow causing a left-right scroll bar. Scary things also happen if you reduce the width of your browser. Again, it behaves perfectly in FF. Can anyone recommend an IE hack that would get that feedback div to behave? I wanted to validate my site and started running the validator. SO i got one doctype and placed in my page(<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">) But now, some of my css "tags" are not working. For and example: Code:
#contact {
border:1px solid #666;
background:#FDF5E6;
width:500px;
margin-left:200px;
margin-top:20px;
padding:20px;
padding-top:5px;
font-size:15;
text-align:left;
}
The border, padding, width, background work. But font-size isnt working. Any ideas? Hey guys, I'm working with firefox and just checking things out in IE to make sure nothing to major pops out. One such thing did come out and I discovered that when I highlight the text of a link the :hover background appears, it normaly doesn't otherwise...although it doesn't follow all my rules here is some code. Code:
/*splash.css*/
#splash p a:hover{
background-image:url('/image/splash_hover.png');
background-repeat:no-repeat;
color:#000;
}
/*index.html head*/
<!--[if ie 6]>
<style>
* html #inner_wrap {
top:35%;
}
#splash a:hover{
background-image:url('/image/splash_hover.png');
background-repeat:no-repeat;
color:#000;
position:relative;
top:2em;/*otherwise the same, I gota push the link down farther for IE, 6 anyway*/
}
#jbc_vc{
display:none;/*because it pushes the enter link off the page*/
}
</style>
<![endif]-->
The background image is repeated even thought it's not in firefox, and I have to highlight the text for the background image to even apear. Does anyone know what error is being triggered here? I have made a CSS dropdown menu which works O.K. on Safari and Firefox but on Explorer, I loose my dropdown menu and all I see is an orange line. Funny thing is, that it works OK on Explorer 8 on vista but not Explorer 8 on XP??? Explorer 5 and 6 is a problem and probably other Explorer versions. I can't recall whether I read somewhere that I have to put a hack line of code somewhere for it to work on Explorer??? Can someone help please? I need it to work properly on all browsers and platforms. Does my code look alright? CSS code: Code:
#menu {
text-align: left;
position:relative;
vertical-align:middle;
display:table-cell;
height: 17px;
}
.submenuHead {
font-family:Arial, Helvetica, sans-serif;
color:#A7A9AC;
font-size:11px;
font-weight:none;
}
#nav {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER: 0px, none; WIDTH: 121px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none;
}
#nav UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none;
}
#nav LI {
FLOAT: left; MARGIN-BOTTOM: 0px; WIDTH: 180px; LINE-HEIGHT: 17px; POSITION: relative; border:0px;
}
#nav LI UL {
MARGIN-TOP: -50px; LEFT: -999em; MARGIN-LEFT: 121px; POSITION: absolute;
}
#nav LI A {
BORDER-RIGHT: none 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: none 0px solid; DISPLAY: block; PADDING-LEFT: 0px ; FONT-WEIGHT: none; PADDING-BOTTOM: 0px; BORDER-LEFT: none 0px solid; WIDTH: 121px; COLOR: none; PADDING-TOP: 0px; BORDER-BOTTOM: none 0px solid; BACKGROUND-COLOR: none; TEXT-DECORATION: none;
}
#nav LI2 A {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 0; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 5px; FONT-WEIGHT: none; PADDING-BOTTOM: 0px; BORDER-LEFT: #ccc 1px solid; WIDTH: 150px; COLOR: #000; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; BACKGROUND-COLOR: #F2F2F2; TEXT-DECORATION: none;
}
#nav LI A:hover {
COLOR: #fff; BACKGROUND-COLOR: #FBB568;
}
#nav LI:hover UL {
LEFT: auto;
}
#nav LI LI:hover UL {
LEFT: auto;
}
#nav LI.sfhover UL {
LEFT: auto;
}
This goes to the HTML: Code: <div id="menu">
<UL id=nav>
<LI><a href="" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menuBtn','','images/menu1.jpg',1)"><img src="images/menu2.jpg" name="menu" width="121" height="17" border="0" rel="balloon1"></a></span>
<UL>
<LI2><a href="http://www.sample1.com" target="_blank" class="submenuHead">Sample1</a></LI2>
<LI2><a href="http://www.sample2.com" target="_blank" class="submenuHead">Sample2</a></LI2>
<LI2><a href="http://www.sample3.com" target="_blank" class="submenuHead">Sample3</a></LI2>
</UL>
</LI>
</UL>
</div>
Hopefully I'm just not stumbling on the right CSS to fix the bugs. I understand that these same bugs might be attributed to the myspade code or myspace rules limiting html/css. Here's the mock-up: www.myspace.com/brovizion 2 bugs (1 in firefox, 1 in ie (6.0)): 1. (firefox only) There are 2 nav bars in the "innerwrapper" div (both black), one at the top, and one at the bottom. On the lower nav bar, my background image that is supposed to tile vertically throughout the whole "innerwrapper" div disapppears. 2. (ie only) The upper and lower nav bars (whose links are set to display: block) are on each of their own lines, yet still floated horizontally. This one is hard to explain except to say the nav bars should work like they do in firefox, but in ie they are on their own program. Viewing the site in both browsers will clearly demonstrate the problem. (ie 6.0, haven't tested in 7.0 yet.) I understand that the nature of this project (a design that must reside in a div overlay on a myspace page) makes for a million different possibilities for why it's messed up, but maybe if someone can help me brainstorm some potential fixes, I'll stumble onto something that works. I'll post my code as well. CSS: Code: <style type="text/css">
.btext {display:none;}
.contacttable {display:none;}
.lightbluetext8 {display:none;}
.nametext {display:none;}
.orangetext15 {display:none;}
.redlink {display:none;}
.whitetext12 {display:none;}
.hidethem {visibility:hidden; display:none;}
.comments {visibility:hidden; display:none;}
body {
background-color: 003366;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
table {
background-color: 003366;
}
p {
font-size: 12px;
}
h1 {
font-size: 24px;
font-weight: bold;
}
h2 {
font-size: 18px;
}
h3 {
font-size: 16px;
font-weight: bold;
}
ul {
list-style-type: none;
}
ul li {
}
a {
color: 003366;
text-decoration: none;
font-size: 12px;
font-weight: bold;
}
a:hover {
color: 003366;
text-decoration: underline;
}
a:visited {
color: 003366;
text-decoration: none;
}
a:visited:hover {
color: 003366;
text-decoration: underline;
}
h1 a {
color: 003366;
text-decoration: none;
font-size: 24px;
font-weight: bold;
}
h1 a:hover {
color: 003366;
text-decoration: underline;
}
h1 a:visited {
color: 003366;
text-decoration: none;
}
h1 a:visited:hover {
color: 003366;
text-decoration: underline;
}
.wrapper {
position: absolute;
top: 132px;
left:50%;
margin-left:-460px;
width: 870px;
height: 800px;
z-index: 1;
text-align: center;
}
.masthead {
width: 870px;
background-image: url(http://www.ourcampusbookstore.com/myspace/images/mastheadbg.jpg);
background-repeat: no-repeat;
height: 195px;
}
.innerwrapper {
width:870px;
padding-left: 92px;
padding-right: 22px;
background-image: url(http://www.ourcampusbookstore.com/myspace/images/bodybg.jpg);
background-repeat: repeat-y;
text-align: left;
}
.uppernav {
width: 756px;
margin: 0;
padding: 0;
background-color: 000000;
font-weight: bold;
display: inline;
}
.leftcol {
clear: both;
width: 500px;
float: left;
vertical-align: top;
padding: 10px;
}
.rightcol {
width: 220px;
float: left;
vertical-align: top;
padding: 10px;
text-align: center;
}
.rightcol h3 {
text-align: center;
}
.lowernav {
width: 756px;
margin: 0;
padding: 0;
background-color: 000000;
font-weight: bold;
clear: both;
}
.footer {
width: 870px;
background-image: url(http://www.ourcampusbookstore.com/myspace/images/footerbg.jpg);
background-position: bottom;
background-repeat:no-repeat;
height: 30px;
clear: both;
}
.uppernav ul {
width: 756px;
list-style: none;
background-color: 000000;
margin: 0;
padding: 0;
float: left;
border-bottom: 2px solid black;
}
.uppernav ul a {
width: 151px;
display: block;
float: left;
margin: 0;
text-decoration: none;
line-height: 20px;
text-align: center;
color: ffffff;
font-weight: bold;
}
.lowernav ul {
width: 756px;
list-style: none;
background-color: 000000;
margin: 0;
padding: 0;
float: left;
border-bottom: 2px solid black;
border-top: 2px solid black;
}
.lowernav ul a {
width: 151px;
display: block;
float: left;
margin: 0;
text-decoration: none;
line-height: 20px;
text-align: center;
color: ffffff;
font-weight: bold;
}
.schoollist {
text-align: center;
}
.schoollist li {
line-height: 16px;
padding: 1px 1px;
width: 150px;
margin: 0 auto;
}
.uppernav ul a:hover, .uppernav ul a:visited:hover {
background-color: ffcc66;
color: 003366;
}
.lowernav ul a:hover, .lowernav ul a:visited:hover {
background-color: ffcc66;
color: 003366;
}
.schoollist a, .schoollist a:visited {
color: 000000;
background-color: EEEEEE;
width: 150px;
line-height: 18px;
font-size: 14px;
font-weight: bold;
display: block;
padding: 1px;
}
.schoollist a:hover, .schoollist a:visited:hover {
color: FFFFFF;
width: 150px;
text-decoration: none;
background-color: 00FF33;
}
.c0000FF a, .c0000FF a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c0000FF a:hover, .c0000FF a:visited:hover {
color: FF6600;
width: 150px;
text-decoration: none;
background-color: 0000FF;
}
.c990000 a, .c990000 a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c990000 a:hover, .c990000 a:visited:hover {
color: FFCC00;
width: 150px;
text-decoration: none;
background-color: 990000;
}
.cCC6600 a, .cCC6600 a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.cCC6600 a:hover, .cCC6600 a:visited:hover {
color: FFFFFF;
width: 150px;
text-decoration: none;
background-color: CC6600;
}
.c3366CC a, .c3366CC a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c3366CC a:hover, .c3366CC a:visited:hover {
color: FFCC33;
width: 150px;
text-decoration: none;
background-color: 3366CC;
}
.c993333 a, .c993333 a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c993333 a:hover, .c993333 a:visited:hover {
color: 999999;
width: 150px;
text-decoration: none;
background-color: 993333;
}
</style>
XHTML: Code: <div class="wrapper"> <div class="masthead"></div> <div class="innerwrapper"> <div class="uppernav"> <ul> <li><a href="#">View our Pics</a></li> <li><a href="#">Watch our Video</a></li> <li><a href="#">View Blog</a></li> <li><a href="#">Send Message</a></li> <li><a href="#">Add 2 Friends</a></li> </ul> </div> <div class="leftcol"> <h1><a href="http://www.ourcampusbookstore.com">OurCampusBookstore.com</a></h1> <h2>About us:</h2> <p><strong>OurCampusBookstore.com</strong> is an online classifieds website customized just for university students. It is formatted to allow students to post anything from textbooks and furniture, to electronics, event announcements and roommates.</p> <h3>What can it be used for?</h3> <ul> <li><strong>1. Post events</strong> - Is your band having a concert? Throwing a huge party? Have a club event to announce? Use the site!</li> <li><strong>2. Furniture</strong> - Are you moving out and need to get rid of furniture? Are you moving into an apartment and need to find furniture? Post what you have or need now and make arrangements to buy/sell your furniture in the future.</li> <li><strong>3. Textbooks</strong>- Buy and sell your used textbooks. Avoid the middleman and the high cost of books. Trade amongst yourselves.</li> <li><strong>4. Jobs</strong> - We have several companies signed up to post available jobs in Pullman, as well as summer internships and post-graduate opportunities all over Washington.</li> <li><strong>5. Apartments</strong> - Need to sublease? Moving to a new apartment? Find information on what's available at ourcampusbookstore.com.</li> <li><strong>6. Electronics, Clothes, etc.</strong> - Sell your used video games, consoles, computers, monitors, TVs, movies, software, and so on.</li> </ul> <h2>Who we'd like to meet:</h2> <p>As many students as possible who have books, furniture and electronics to sell, or students looking for books, furniture, apartments, jobs and events to attend!</p> </div> <div class="rightcol"> <h3>Current Schools</h3> <ul class="schoollist"> <li class="c0000FF"><a href="http://florida.ourcampusbookstore.com">Florida</a></li> <li class="c990000"><a href="http://minnesota.ourcampusbookstore.com">Minnesota</a></li> <li class="cCC6600"><a href="http://texas.ourcampusbookstore.com">Texas</a></li> <li class="c3366CC"><a href="http://ucla.ourcampusbookstore.com">UCLA</a></li> <li class="c993333"><a href="http://washingtonstate.ourcampusbookstore.com">Washington State</a></li> </ul> </div> <div class="lowernav"> <ul> <li><a href="#">Add 2 Group</a></li> <li><a href="#">Forward 2 Friend</a></li> <li><a href="#">Add 2 Favorites</a></li> <li><a href="#">Block Me</a></li> <li><a href="#">Rank Me</a></li> </ul> </div> </div> <div class="footer"></div> </div> First: I have seen: p.classname and just .classname What is the difference between the two if the latter is applied to a paragraph? Also: I have seen classes stack on top of each other like: <p class ="classname" class ="classname2">text</p> <p class = "classname" id = "idname">text</p> So is there a way to use classes with other classes id with other ids or classes and ids together like the above? On this page: http://www.mediamogulsweb.com/. I'm having a few minor issues. 1) In IE7, something is wrong with this code: Quote: #blurbs { background:52% 48% url(plus_design.jpg) no-repeat; width:615px; height:481px; margin:13px 0 10px 0; border:1px solid #000; } You'll see what I mean when you look....the 1px border is only there to illustrate the problem...it should look like it does in IE6 or Mozilla... 2) In IE6, there is some extra padding or something for these styles: Quote: #bot_left_text_box2 { width:78px; height:81px; margin:0; border:1px solid #000; } #bot_right_text_box2 { width:78px; height:81px; margin:10px 0 0 0; border:1px solid #000; } Again, you'll see it when you look... Any help is appreciated...I can;t seem to find the problem, and I'm too tired too stare at it any longer...so maybe one of you can help...thanks. |
|||||||