|
CSS - Layout Bugs: Ie And Ff
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; }
Similar Tutorialshttp:// 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 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. 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! 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 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? 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. 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> 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>
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 have noticed that sites I make is out of whack on different browsers. Like the divs using absolute positions would line up on different positions, pop up windows that open to a certain size, open smaller and scrollbars appear when I asked it not to. Is there like something a person can add, to make sure that a site you build and tested on one platform and one browser, works and looks properly on all browsers? What are the common bugs that appear and the common hack or fix for it? Thanks. Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? So I'm trying to get a semi-liquid layout that has the side benefit of allowing the HTML page content to be organized in a way that losing the stylesheet won't kill it. Ideally, the HTML page would be: LOGO BREADCRUMBS CONTENT MENU RIGHTSIDE CONTENT FOOTER Unfortunately, I've had to move the rightside content up in the page order since I can't seem to configure my CSS in a way that makes it work the other way. This is as far as I've gotten, and I can't get the footer to properly begin at the end of the longest element. I know it's a side effect of the absolute positioning of the Logo and Menu, but I can't think of a way to layer this stuff any better. Help! If you can help me get this up and running, I'll be sure to thank you and hit you back with a link on my site when it's done. Since I can't link directly to anything yet, here's the image of what the layout should look like. I want the footer to fall under the scroll bar if there is one, I don't want a ever-present footer. Code: www.ctechsinc.com/temp3/mockupb.gif Code:
* {
padding-left: 0px;
margin:0px;
}
table {
border-collapse:collapse;
}
img {
border:none;
}
#container
{
width:100%;
}
.logo {
float: left;
height: 260px;
width: 200px;
background-color: #0099CC;
}
.menu {
background-color: #996699;
width: 200px;
height: 150px;
float: left;
position: absolute;
top: 260px;
left: 0px;
}
.greenwrap {
background-color: #006633;
margin-left: 230px;
margin-top: 10px; /* this can be deleted once implemented; it's only here to help align things */
}
.breadcrumb {
background-color: #99CCCC;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.content {
min-width:220px;
height:100px;
background-color: #00CCCC;
float: left;
}
.contentwrap {
background-color: #00FF99;
float: left;
}
.sidebar {
width: 200px;
background-color: #3399FF;
float: none;
right: 0px;
position: absolute;
}
.box1 {
background-color: #00FFFF;
min-width:220px;
margin-top: 20px;
margin-right: 220px;
margin-bottom: 20px;
margin-left: 20px;
}
.qlink {
margin: 20px;
}
.footer {
margin:0px;
width: 100%;
float: left;
clear: none;
}
Code: <html>
<head>
<link href="screen2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div class="logo">
Logo
</div>
</div>
<!-- content, RH -->
<div>
<div class="greenwrap">
<div class="breadcrumb">
<h1>BREADCRUMBS</h1><br>
</div>
<!-- <div class="content"> -->
<div class="contentwrap">
<div class="box1">
<h2>heading!</h2>
<p>Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks.
</p>
</div>
<div class="box1">
<h2>heading!</h2>
<p>Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks.
</p>
</div>
</div>
<div class="sidebar">
<div class="qlink">
<p>boring content boring contentboring content boring contentboring content boring contentboring content boring contentboring content boring content
</p>
</div>
</div>
<!-- </div> -->
</div>
<div class="menu">
<p>Menu</p><p>Menu</p><p>Menu</p>
</div>
<div class="footer">
<p>Fooooooooooooooooooooooooooooooooooooooterrrrr!</p>
</div>
</div>
<!-- menu -->
</body>
</html>
This is my mockup: http://beta.investchallenge.com/ The corresponding CSS for the page: http://beta.investchallenge.com/styles/layout.css The left and right columns are not lining up like they should be, I can't figure what is causing this is the CSS. Any ideas? My layout is pretty simple. 1 large columb in the center that should extend the full length of the browser(minimum) regardless of how much text is in it. 1 column on either side of it for other content. I cannot get the middle column to extend to 100%. it stops at the data. Here is my CSS. Code:
body {
margin: 0;
padding: 0;
font-size: 12px;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #C10E0E;
}
#leftcolumn {
display: inline;
float: left;
left: 15%;
width: 150px;
}
#centercolumn {
float: left;
width: 511px;
height: 100%;
margin-left: 2px;
padding: 8px;
border-left: 1px solid #494949;
border-right: 1px solid #494949;
background: url(/images/bg.png) no-repeat top left;
background-color: #FFDCAA;
}
#rightcolumn {
float: left;
width: 150px;
margin-left: 1px;
}
#mainnav {
width: 150px;
padding: 0 0 0 0;
font-size: 12px;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #C10E0E;
color: #FFDCAA;
}
#mainnav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#mainnav li {
margin: 0 0 0 0;
border-left: 7px solid #C10E0E;
padding: 0 5px 0 0;
}
#mainnav li a {
display: block;
height: 15px;
vertical-align: middle;
padding: 0 0 0 0;
margin: 0 0 0 0;
background-color: #C10E0E;
color: #FFDCAA;
text-decoration: none;
text-align: right;
}
html>body #mainnav li a {
width: auto;
padding: 0;
margin: 0;
}
#mainnav li a:hover {
background-color: #C10E0E;
border-left: 7px solid #FFDCAA;
color: #FFF;
padding: 0;
margin: 0;
}
#mainnav h3 {
padding-left: 5px;
font-size: 14px;
font-weight: bold;
color: #F6D4A4;
font-style: italic;
}
thanks! |
|||||||