|
CSS - Website Not Positioning Correct In Ie
Hey all!
I tried this forum once before and no one helped me, but I hope someone can help me now. I scrapped the design of the last problem and started over, so now I have new problems. I got a Blogger template off the internet and all of the pages work fine except the homepage and calendar page that I made in Dreamweaver to try to look like the blog pages. In internet explorer, it doesn't work right. It looks okay in Firefox. It looks better in internet explorer with...oh...that google add-on installed...cannot remember what it is called. What can I do to fix the coding. Please help! I am self taught and this is driving me crazy. You have no idea how long it took me to get it to where it is now! www.hanoverlutheran dot com Similar TutorialsHello all. I wouldn't say that I'm a CSS n00b because I've been using it for a while but this is my first attempt at trying to build a site without tables using CSS. I looked at a few examples online and came up with the following for the page itself: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
<html>
<head>
<title>My Site</title>
<script src="scripts/js/main.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/main.css">
</head>
<body>
<div id="logo_search">
<form name="search_form" method="POST" action="" onSubmit="return validate_form(this);">
<div id="logos">
<img align="absbottom" src="images/logo.png"><img align="absbottom" src="images/curve.png">
<input class="search_field" type="text" name="search_field" size="20">
</div>
</form>
</div>
</body>
</html>
Where the contents of main.css are as follows: Code:
body {
margin: 0;
padding: 0;
background: #0081b3; } /* end body */
#logo_search {
display: block;
background: #ffffff; }
#logos {
display: compact;
background: #ff0000;
margin-left: 200px; } /* end #logo */
.search_field {
text-align: right;
margin-left: 400px; } /* end #search_field */
form {
margin: 0;
padding: 0;
} /* end form */
Thinking tabularly (I know, I can't help it), what I'm trying to accomplish is to position these items on a single row with the search field about 25-50px from the right edge of the browser and the first image beginning about 200px from the left edge of the browser with white space from the image to the left and red from the image to the right. The code I have accomplishes this task however when the browser window shrinks, the search field wraps below the images so I'm thinking that there is a better way to do it than what I was doing. I have tested in Mac FF and Safari and PC FF and my page appears correct. In IE7, the images at the bottom (#bottom) don't match up (with #nav). If I delete the 10 px padding on #bottom, it appears correctly in IE7, but not the other browsers. Can anyone tell me why this is happening? Is there a bug fix somewhere? Unfortunately, this forum won't let me post my url because I'm new, so I'm not sure how to describe what is happening without a visual, but here goes: I have a background image that encompasses the entire page. Because of my rollovers on my images at the bottom (contained in #bottom), I kept the background when making the images. The background on the images in #bottom do not match up with the background, thereby creating a disjoint, or "leap," between #nav and #bottom. Why would this happen in IE7 and not FF or Safari? (See first paragraph for padding explanation.) css: @charset "UTF-8"; #outer { width: 723px; background-image: url(images/art_bground.jpg); background-repeat: no-repeat; position:relative; float: none; margin: 0 auto; } #bottom { margin: 0px; height: 312px; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; img display: block; } #body { margin-top: 0px; margin-right: 25px; margin-bottom: 0px; margin-left: 260px; height: 208px; padding-top: 25px; padding-bottom: 0px; } a:link { color: #c33b03; text-decoration: none; } a:visited { text-decoration: none; color: #996600; } a:hover { text-decoration: none; color: #6a2e09; } a:active { text-decoration: none; color: #6a2e09; } .text {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #6a2e09;} .navtext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bolder; color: #c33b03; margin-top: -10px; } .bold { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bolder; color: #c33b03; font-style: normal; } #nav { margin-top: 0px; margin-right: 25px; margin-left: 520px; margin-bottom: 0px; height: 178px; } Hey guys, at sev<dot>nj-webdesigner<dot>com/firm/profile.html - on the bottom of the page if you mouse over the first couple ticks (by "1928"), a hidden div displays above the tick mark. The positioning works as expected in Firefox and IE7, but the positioning is off in IE6. Any ideas why there is a difference and how to fix it? Thanks. I've bee fooling around with something that has no real purpose (but could) to try to understand an image positioning problem that I'm trying to avoid solving with tables. I hacked this CSS out, and it looks exactly and acts exactly like I want, but I can't help thinking it's not correct, especially how I deal with the "up" and "down" control images... Originally, I had thought the way to do this thing would be 5 distinct DIVs inside a container DIV, but as it turned out, one of the five turned into the container for all... This looks the same in FF and IE, which is what I want... The code can be seen in a browser he SiliconSatan.com/test.html Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style>
.col_tab_left {
position: relative;
width: 36px;
height: 30px;
left: 0px;
top: 0px;
background-image: url(./images/col_tab_left.gif);
}
.col_tab_middle {
width: 430px;
height: 30px;
position: absolute;
left: 36px;
top: 0px;
background-image: url(./images/col_tab_bg.gif);
text-align: center;
}
.col_tab_right {
width: 26px;
height: 30px;
position: absolute;
left: 466px;
top: 0px;
background-image: url(./images/col_tab_right.gif);
text-align: center;
}
.col_tab_title {
font-family: "Comic Sans MS", san-serif;
font-size: 10pt;
font-weight: bold;
line-height: 30px
}
.block_up {
width: 36px;
height: 30px;
border: 0px solid #003366;
left: 5px;
}
.block_down {
width: 36px;
height: 30px;
border: 0px solid #003366;
position: absolute;
left: 13px;
top: 0px;
}
.image {
position: relative;
display:block;
left: 7px;
top: 12px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td width="200">This is some text</td>
<td>
<div class="col_tab_left">
<div class="block_up">
<img class="image" src="images/block_up2.gif" width="9" height="9" border="0" alt="">
</div>
<div class="block_down">
<img class="image" src="images/block_down2.gif" width="9" height="9" border="0" alt="">
</div>
<div class="col_tab_middle"><span class="col_tab_title">TEST</span></div>
<div class="col_tab_right"></div>
</div>
</td>
</tr>
</table>
<br>
<div class="col_tab_left">
<div class="block_up">
<img class="image" src="images/block_up2.gif" width="9" height="9" border="0" alt="">
</div>
<div class="block_down">
<img class="image" src="images/block_down2.gif" width="9" height="9" border="0" alt="">
</div>
<div class="col_tab_middle"><span class="col_tab_title">TEST</span></div>
<div class="col_tab_right"></div>
</div>
</body>
</html>
In my css I have the following to set up the height and width of the page to 100%: Code:
html, body {
font-family: verdana, arial, sans-serif;
color: #000000;
background-color: #E1E1E1;
margin: 0;
width: 100%;
height: 100%;
text-align: center;
}
For my website I have the following layout: Code:
<body>
<div id="container">
<div id="header"></div>
<div id="menu"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
How do I get the <div id="main"></div> to fill in the remainder of the window height, without setting its height to 100% and them causing scroll bars and throwing the footer off the page. Hi, I am creating a website for an assignment in University. It is complete but while testing it on browsers, I noticed my text runs into my menu, to the left when i minimize the browser page. Just wondering if there's something I can put in CSS to hold everything in place? It seems fine otherwise Edit: Must use Firefox! Hey guys i have some image layout problems with my images on safari and firefox on Mac only. Firefox and safari on PC seem fine but its only happening on Mac. The positioning of the images have moved dramatically. Not sure how to fix it CSS is validated and so is xhtml strict I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo XHTML strict (no inline elements in <form) Code: <form ...> <div> <input ... /> <input ... /> </div> </form> Is the empty div element acceptable? Thank you <p>All-in-one solution for all your Web site needs <i>and</i> wants <ul> <li>Subscriptions and Web alerts</li> <li>Web site replication</li> <li>Integrated Document Management</li> <li>Next-generation HTML Form support</li></ul> What the question is is if it is correct to mix text (inline) with a <ul> element (block-level). Thank you Hi guys, Is it correct to have a <div after a <form or after a <p ?? For example, is this correct: Code: <form action="... </form> <div id="forgot_pass"> ... </div> OR Code: <p id="... </p> <div id="forgot_pass"> ... </div> Thank you I have been scouring this forum trying to find the correct answer. I have a list of links in an unordered list. I am using css to style the list. The one thing I can't seem to figure out is, if I have the wrong doctypes or my css is wrong. I have replaced the bullet for the li tags with background images. One is just a line the other is a line with an arrow. I am trying to push the type over a little past my arrow. In the css I have put a padding-left: 1 em; on the li tag. It works in IE but not firefox, so I added padding-left: 10; This seemed to push the li tag over in firefox. The next problem was when I went to put the doc types in. I put <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> above the <html> tag. Once again it worked in IE but not Firefox. I took out the doctype tag and inserted <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> inside the <head> tags. This seems to work in both IE and Firefox. Is this an incorrect way to put a doc type in? Below please see the css I am using and my header info Code: /*right hand nav bar*/
#nav ul{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 13px;
list-style-type: none;
padding: 0;
margin: 0;
}
#nav li{
background: url(../images/divider_rht_nav.gif) repeat-x bottom;
padding-top: 0.3em;
padding-bottom: 0.6em;
padding-left: 1 em; /*this is for IE*/
padding-left: 10; /*this is for FireFox*/
}
#nav a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
line-height: 13px;
color: #325087;
}
#nav a:hover {
color: #CC0000;
line-height: 13px;
}
#nav li.selected {
color: #174A4A;
font-weight: bold;
background-image: url(../images/divider_rht_nav_arrow.gif);
}
.heading {
font-weight: bold;
color: #174A4A;
font-size:10px;
}
.headingspace {
font-weight: bold;
color: #174A4A;
font-size:10px;
margin-top: 1.5em;
}
/*end style*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Admin Area - Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../css/master.css" rel="stylesheet" type="text/css" media="screen">
<link href="../css/master_print.css" rel="stylesheet" type="text/css" media="print">
<script language="javascript" type="text/javascript" src="scripts/validate_admin_login.js"></script>
</head>
Is it correct to use in CSS?? thank you http://www.rich-carey.com/rc-alpha/index.php?c=files&content=misc A problem with my CSS means the columns arent equal, any ideas? ive tried several things, and JUST got colour on the right side now. Someone said something about problems with floats but i didnt quite udnerstand it Hi all, There is a serious positioning problem going on with my page. It looks right in Firefox3, but in IE7 the spacing is messed up and the top left photo fails to display. I imagine it has something to do with the padding or margin for my text. Please help! I have validated in both CSS and HTML. Also, can anyone recommend any sort of tool to help with things like this in the future? I am in an intro web class so I failed to cross check browsers, bear with me... Thanks in advance, Amanda 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Dachsund Rescue of Houston</title>
<style type="text/css">
body{
background: url(images/background.jpg) no-repeat top center;}
#contain{
width: 800px;
height: 640px;
margin-left: auto;
margin-right: auto;
}
#menu{ width: 466px;
height: 98px;
float: right;
margin-top: 15px;
}
#dog{ width: 491px;
height: 257px;
margin-top: 19px;
margin-left: 22px;
float: left; }
/* margin-top is the menu plus the remaining pixels (19) so, from the very TOP of the page. I guess you keep "adding"
*/
#community{ float: right;
background: url(images/community_spot.jpg) no-repeat;
width: 231px;
height: 259px;
margin-top: 19px;
margin-right: 22px;
}
#arrival{
clear: right;
background: url(images/arrivals.png) no-repeat;
width: 800px;
height: 286px;
}
.communitytext {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 160px 10px 0 15px; /*up, right, bottom, left */
margin: 5px auto 5px 10px; /*up, right, bottom, left */
}
.arrivaltext {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 105px 10px 0 10px; /*up, right, bottom, left */
margin: 15px 10px 5px 10px; /*up, right, bottom, left */
}
.arrivaltext2 {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 3px 10px 0 10px; /*up, right, bottom, left */
margin: 15px 10px 5px 10px; /*up, right, bottom, left */
}
</style>
</head>
<body>
<div id="contain">
<div id="menu">
<a href="about.html"><img src="images/about_btn.png" alt="About button" title="About" border="0"/></a>
<a href="adopt.html"><img src="images/adopt_btn.png" alt="Adopt button" title="Adopt" border="0"/></a>
<a href="help.html"><img src="images/help_btn.png" alt="Help button" title="Help DROH" border="0"/></a>
<a href="resources.html"><img src="images/resources_btn.png" alt="Resources button" title="Resources" border="0"/></a>
<a href="contact.html"><img src="images/contact_btn.png" alt="Contact button" title="Contact" border="0"/></a>
</div>
<div id="dog">
<img src="images/jumping.jpg" alt="" title="" border="0" /> </div>
<div id="community"> <p class="communitytext">If you love animals, fostering allows you to go through 'em and love a whole bunch of 'em - without having to keep 100 dogs at your house. MORE...</p></div>
<div id="arrival"><p class="arrivaltext">Luke is a happy-go-lucky, love bug. He is between 1-3 yrs old, with black/tan dapple. He is mixed with another breed which we suspect to be a Spaniel or Catahoula. He stands about 11/2 feet tall to the top of the head and weighs 20 lbs. </p> <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with
him. He has an intense alluring stare to draw you in, then he slowly cuddles up next to you, and when you've fallen for him, he covers you with gentle kisses. </p> <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with
him. </p>
</div>
</div>
</body>
</html>
Well, I'm redesigning my site because the current php management system was thrown together in a hurry just to get it up there. Now I've got time to redo it and I want to do it right. It's a webcomic site. Currently, the site has an XML layout that serves XHTML after a serverside transformation. What I want to do is lay the site out now so I can define my xsl. The basic "gist" of the situation is, i want it to be as accessible as possible(even though blind people may not be able to see the images, they deserve to surf my website.). With that, I want my content to show up before my link area, so they can easily get to the content without listening to a long list of links first. So what I've done in firefox was repositioned the div tags that held the content above the div section that held the link boxes. That's fine and dandy, where's my point? I still want the linkboxes to appear on the lefthand side of the page and the content on the right. In firefox, I used float:right;margin-right:5%; for the content and float:left on the link boxes. It works fine in firefox. The boxes appear on the left and content on the right. However, in IE the content appears on the right, but the link boxes appear on the left of the next line. Here is relelvant code: html Code: Original - html 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"> <head> <title>AdrienComix</title> <style type="text/css"> #body{ margin:0; } .header{ margin-bottom:10px; width:100%; height:15%; color:#000000; background-color:#00BBFF; background:url(http://www.adriencomix.com/res/head.jpg); border:1px dashed; text-align:center; font-size:20pt; } .box{ border:1px dashed; margin-bottom:30px; margin-left:2px; padding-left:5px; width:100%; background-color:#00BBFF; color:#000000; } .left{ width:15%; height:85%; float:left; } .content{ width:74.6%; height:100%; margin-left:5%; float:right; padding-right:5%; } .comic{ text-align:center; padding-top:15px; padding-bottom:15px; } .emp{ text-align:center; padding-top:20px; font-size:150%; font-weight:bold; } </style> </head> <body id="body"> <div class="header"><p>AdrienComix</p></div> <div class="content"> <div class="emp">Happy New Year!</div> <div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div> <div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div> <div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div> </div> <div class="left"> <div class="box"> <center><h3>Links</h3></center><br/> <a href="http://www.sluggy.com">Sluggy Freelance</a><br/> <a href="http://www.nuklearpower.com">8-bit Theater</a><br/> <a href="http://www.slackware.com">Slackware Linux</a><br/> <a href="http://www.gnu.org">GNU</a><br/> <a href="http://www.kernel.org">Linux Kernel</a><br/> <a href="http://www.google.com">Google</a> </div> <div class="box"> <center><h3>Archive</h3></center><br/> <a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/> <a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/> <a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/> <a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/> <a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/> <a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/> <a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/> <a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/> <a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/> <a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/> </div> </div> </body> </html>
<!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">
<head>
<title>AdrienComix</title>
<style type="text/css">
#body{
margin:0;
}
.header{
margin-bottom:10px;
width:100%;
height:15%;
color:#000000;
background-color:#00BBFF;
background:url(http://www.adriencomix.com/res/head.jpg);
border:1px dashed;
text-align:center;
font-size:20pt;
}
.box{
border:1px dashed;
margin-bottom:30px;
margin-left:2px;
padding-left:5px;
width:100%;
background-color:#00BBFF;
color:#000000;
}
.left{
width:15%;
height:85%;
float:left;
}
.content{
width:74.6%;
height:100%;
margin-left:5%;
float:right;
padding-right:5%;
}
.comic{
text-align:center;
padding-top:15px;
padding-bottom:15px;
}
.emp{
text-align:center;
padding-top:20px;
font-size:150%;
font-weight:bold;
}
</style>
</head>
<body id="body">
<div class="header"><p>AdrienComix</p></div>
<div class="content">
<div class="emp">Happy New Year!</div>
<div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div>
<div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div>
<div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div>
</div>
<div class="left">
<div class="box">
<center><h3>Links</h3></center><br/>
<a href="http://www.sluggy.com">Sluggy Freelance</a><br/>
<a href="http://www.nuklearpower.com">8-bit Theater</a><br/>
<a href="http://www.slackware.com">Slackware Linux</a><br/>
<a href="http://www.gnu.org">GNU</a><br/>
<a href="http://www.kernel.org">Linux Kernel</a><br/>
<a href="http://www.google.com">Google</a>
</div>
<div class="box">
<center><h3>Archive</h3></center><br/>
<a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/>
</div>
</div>
</body>
</html>
Is there any way that I can make it appear on the same line in IE without breaking the layout in firefox and keeping the page accessible? Hi everyone, Please see this page in IE: shawnessy.ca/test.php The height of the top row (not the <TH> row) of the calendar gets messed up. The page looks fine under Firefox. Basically, I grabbed this calendar from my forum, which on its own, looks fine in IE: shawnessy.ca/forum/ Can anyone give me some suggestions as to how to fix this? With IE, the background of SELECT elements is not respecting the CSS file setting. But IE does respect the CSS for the INPUT element. Netscape 7.1 and Mozilla Firefox work correctly for SELECT and INPUT. Here is a snippet from my stylesheet file: SELECT { FONT-WEIGHT: normal; BACKGROUND: beige; COLOR: darkgreen } INPUT { FONT-WEIGHT: normal; BACKGROUND: beige; COLOR: darkgreen } I have tried #FFFFD8 and #F5F5DC as alternatives to the name "beige" for the SELECT entry. Result is always white. Yet my text boxes show properly as beige so I am confused about why that name is ignored for SELECT elements. Note that I can change the entry to something basic like BACKGROUND: yellow and that displays correctly (but I don't want yellow - I want beige - like the INPUT element). These SELECT and INPUT elements are always in some table such as: <td class=genericinputleft>Starting Date<select name=dd1 etc. Could there be a cascading problem in IE ? Here is the CSS: .genericinputLeft { FONT-WEIGHT: bold; FONT-SIZE: x-small; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: black; FONT-FAMILY: Arial; text-align: left; vertical-align: top } I have tried commenting out the BACKGROUND entry from the class above but that does not seem to help. Thanks. So, my page works correct in firefox, but my divs on the right side show at the top of the page in internet explorer. Firefox: img251.imageshack.us/i/page2uop.jpg Internet Explorer: img846.imageshack.us/i/page1.jpg I'll post my html and css in case you need it: CSS: Code: #wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
border-style: double;
}
#logo {
border-color: #007500;
border-style: double;
border-width: 5px;
height: 128px;
float: left;
}
#titlewrap {
float: left;
}
#filler {
float: left;
width: 20px;
}
#logo2 {
background: #B3FF00;
border-color: #007500;
float: left;
width: 210px;
border-style: double;
border-width: 5px;
text-align: center;
margin: 10px;
padding: 10px;
}
#title {
clear: both;
float: left;
font-size: 36px;
font-style: italic;
margin: 10px;
}
#links {
clear: both;
float: left;
margin: 10px;
}
#body1 {
background: #CEFBA2;
border-color: #007500;
height: 170px;
clear: both;
float: left;
width: 35%;
border-style: double;
border-width: 4px;
text-align: left;
margin: 10px;
padding: 20px;
}
#body2 {
background: #CEFBA2;
border-color: #007500;
height: 170px;
float: left;
width: 50%;
border-style: double;
border-width: 4px;
margin: 10px;
padding: 20px;
}
#body3 {
background: #CEFBA2;
border-color: #007500;
clear: both;
float: left;
width: 50%;
border-style: double;
border-width: 4px;
margin: 10px;
padding: 20px;
}
#body4 {
background: #CEFBA2;
border-color: #007500;
float: left;
width: 35%;
border-style: double;
border-width: 4px;
margin: 10px;
padding: 20px;
}
#contact {
background: #CEFBA2;
border-color: #007500;
clear: both;
float: left;
width: 92%;
border-style: double;
border-width: 4px;
margin: 10px;
padding: 20px;
}
#foot {
clear: both;
text-align: right;
font-size: 12px;
margin: 10px;
}
HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="layout.css">
</head>
<body><div id="wrapper">
<div id="logo"></div>
<div id="filler"></div>
<div id="titlewrap">
<div id="logo2"></div>
<div id="title"></div>
</div>
<div id="links"></div>
<div id="body1"></div>
<div id="body2"></div>
<div id="body3"></div>
<div id="body4"></div>
<div id="foot">
</div>
</div></body>
</html>
This site is entirely CSS built and is database driven so it is completely dependent on classes and Id's. I have a conflict with <H5> in this page/site template I'm trying to edit. H5 is used for the title in the header and needs to be white. As you can see by the example of the my news section it looks just as I want it (H5 is the bigger bolder text that starts each paragraph) MyNews.jpg Code: <div class="bodyNews"> <h4>My News</h4> <h6> <h5>News 1</h5> Content ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </h6> <h6> <h5>News 2</h5> Content ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </h6> <h6> <h5>News 3</h5> Content ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </h6> </div> And here's the CSS: Code: div.myNews {}
h4 {
font: 15px Georgia,serif;
font-weight: normal;
color: #6b3616;
text-transform: uppercase;
display: block;
margin: 25px 0 2px 0;
}
h5 {
font: 14px Georgia,serif;
font-weight: normal;
color: #6b3616;
margin-right: 4px;
display: inline;
}
h6 {
font: 11px/14px Verdana,sans-serif;
color: #3d412d;
margin: 10px 4px 2px 0;
}
So the problem is the H5 though it looks fine in this news part it messes with the header H5 and I can't change the class there... There must be another way to do this... Can anyone offer an alternative? See the site he Template M |
|||||||