|
CSS - Site Not Showing Properly In Ie
Hi, my site is not showing properly in IE, but looks great in Firefox, I know it is the floats, but why I don't know since I cleared them both
This is my doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> here is the code I am using in the php page <? include ("header.txt"); ?> <div id="page"> <div id="headerimg"> </div> <div id="topbar"> </div> <div id="content"> <table summary="main content" width="90%"><tr><td> <p align="justify"><span>Welcome to Call Me Farms, your first choice in breeding for Australian Cattle dogs, Border Collies, and Rat Terriers. Located in Parrish, Florida, Call Me Farms takes pride in bringing you the very best there is to offer in these breeds.</span></p> <p align="justify"><span>Here at Call Me Farms we breed for Ability, Beauty, Brawn. My dogs are tested-OFA Hips, Elbows, Prcd and we have a lot of proven finished Champions that are my best buds. My dogs are in all kinds of venues-agility-herding-flyball-protection-conformation and just being a good dog and your best friend. We have produced five generations of Champions and over 34 home bred Champions. I say it's a good start.</span></p> <p align="justify"><span>Here in our site you will find all the information you will need about our breeds, from confirmation through companionship. There are all the latest updates on how well my dogs are doing in competitions, as well as when the puppies are available. Photos of my dogs abound so you can see how beautiful and well bred they are. There is also a page on my foundation dogs, which started it all.</span></p> <div id="currentevents"> </div> <div style="height: 350px; width: 500px; overflow: auto"> <!--UPDATES BEGIN HERE--> <? include ("update.txt"); ?> <!--UPDATES END HERE--> </div> <div id="publications"> </div> <div align="center"> <p align="justify">These are just some of the publications our dogs have appeared in. They have also appeared in numerous calendars, greeting cards, note cards, stationary, and more!</p> <br /> <br /> <img src="images/books.jpg" alt="Publications" width="500" height="100" /><br /> <br /> <br /> <br /> <? include ("footer.txt"); ?> <br /> </div> </td></tr></table> </div> <div id="sidebar"> <div align="center"> <? include ("menu.txt"); ?> <br /> <br /> <table summary="Recommend Us" class="textbox1" width="200" align="center"> <tr> <td valign="top" class="textboxheader"> <div align="center"> Recommend Us </div> </td> </tr> <tr> <td> <div align="center"> <br /> <form method="post" action="cgi-bin/recommend.cgi"> <small>Friends Name:</small><br /> <input type="text" name="recipient_name" size="15" class="input" /><br /> <small>Friends Email Address:</small><br /> <input type="text" name="recipient_email" size="15" class="input" /><br /> <small>Your Name:</small><br /> <input type="text" name="sender_name" size="15" class="input" /><br /> <small>Your Email Address:</small><br /> <input type="text" name="sender_email" size="15" class="input" /><br /> <br /> <input size="1" type="submit" class="button" value="Submit" /> </form> </div> </td> </tr> </table> <br /> <br /> <small>last updated<br /> <script type="text/javascript" language="JavaScript" src="java/update.js"> </script> </small> <br /> <br /> <!--HIDDEN LINKS REQUIRED FOR COUNTER--> <a href="(URL address blocked: See forum rules)"></a><a href="(URL address blocked: See forum rules)"></a> <!--END HIDDEN LINKS FOR COUNTER--> <a href="(URL address blocked: See forum rules)"><img border="0" src="(URL address blocked: See forum rules)=1308498&c=3925807" alt="Website Visitor Counter" /></a><br /> <small>visitors</small> </div> </div> <div class="clear"> </div> <div id="footer"> </div> </div> </body> </html> and here is the css /* CSS Document */ /* basic elements */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #545838; background-color: #e9ebdc; background-image: url(images/bg.jpg); margin-top: 0px; } /* specific divs */ #page { background-color: #fdfdfb; width : 750px; padding : 0; margin : 0 auto; text-align : left; height : auto; border-left : 1px solid #000000; border-right : 1px solid #000000; } #headerimg { background-image : url(images/callmefarms.jpg); margin : 0 auto; width : 750px; height : 280px; padding : 0; } #topbar { background-image : url(images/header1.jpg); margin : 0 auto; width : 750px; height : 85px; padding : 0; } #content { float : left; width : 500px; } #sidebar { float : left; width : 250px; height : auto; padding : 0; } #currentevents { background: #fdfdfb url(images/currentevents.jpg) no-repeat top left; margin-top: 0px; width: 500px; height: 75px; } #publications { background: #fdfdfb url(images/publications.jpg) no-repeat top left; margin-top: 0px; width: 500px; height: 100px; } #footer { background: #a2a876 url(images/footer.jpg); width : 750px; padding : 0; height: 75px; } #resources { background: #e9ebdc url(images/resources.jpg) no-repeat top left; width: 250px; height: 60px; text-align: center; } /* specific classes */ .clear { clear:both; font-size:0; line-height:0px; height:0; } at this point I am totally clueless as to what is the problem here, any help would be most appreciated....thanks!! Similar TutorialsI am working on this website babeside dot be Everything is going as I want it in all browsers, except IE. When opening the website in IE, and selecting a babe, the babe-part is shown waaaaay underneath all the other parts of the site. Can anyone help me how to fix this? Hey Everyone, I was wondering if anyone could take a quick look at my Style Sheet and let me know I can do to improve and why it isn't working in all browser's... It works great in most browser's but then there is explorer, and it doesn't seem to work fine in there... Here it is and I would really appreciate it if someone could look at it for me, thanks... Nick I'm working on a website that I'm having issues with in the CSS. I'm fairly new to CSS and I don't know how to get an image banner to show up next to each other. I though with the css in place I could do that, but some how I'm missing where the nav drops down in to the next div which is suppose to be a slideshow type div. The page is at ukindesigns.com/EBB/ebb.html and the style sheet can be found at ukindesigns.com/EBB/CSS/style.css Thanks, Franky Hello Can u hlp me please? have look at www.verexelto.sk/test/test1.php - this is good version of the page but without any text in the footer. after i try tu put any content into footer (f.e. some text) the page wil not do this properly (the way i want it :-) ) have look at www.verexelto.sk/test/test.php (scroll down) What should i have to do , what am i doing wrong? Thank you I am having the same problem as a few other posters regarding Spry menu bars. I was wondering if someone here could help us. The link is The problem link Thanks Hi everyone, This is my first time posting, I'm having a issue getting my site to appear correctly in IE7. It displays properly in all other major browsers (firefox, safari, chrome, opera and even ie6) but for some reason in IE7 the header imager overlaps the menubar. The site is (vividmark.com.au) and if anyone could shead some light on this, I'd be very greatful. Thanks. hey i was just wondering how i can fix the left menu to display properly in Opera. it works in Moziila and i have a seperate style sheet for IE but Opera is no go. are there any hacks that will fix the positoning? the site is located at: http://studentwork.qantm.com.au/pking/Website/ and css is at: http://studentwork.qantm.com.au/pking/Website/ptwm.css any help would be great cheers I have been working on a site for the past week and I am trying to get it to work in every browser. I have tested it with 32 different browers, ranging from different versions to different operating systems. From my review, the following browsers are not rendering the website properly: Phoenix 0.5 on PLD Linux Phoenix 0.4 on PLD Linux Dillo 0.8.6 on PLD Linux MSIE 6.0 on Windows XP MSIE 5.5 on Windows XP MSIE 5.01 on Windows XP MSIE 5.5 on Windows XP Phoenix 0.5 on PLD Linux Navigator 4.8 on PLD Linux They all seem to take the sidebar and push it to the bottom of the page rather than have it to the right. If you view the site in any firefox, you will see exactly how I want it displayed. Please let me know what error exist within my css and then post it here! I have run the site through validator.w3.org and it shows that my site is perfect in terms of validation... I have the doctype specified properly too. Bristol Cove's Validator The website to view the code is: http://www.gc40.com/b2/ I also added the website to www.browsershots.org to view the different browser displays and how different browsers render them... So please, anyone that is willing to go through the snapshots, please tell me the errors you notice and what to do to fix them. BrowserShots.org - Different browser rendering for Bristol Cove's Site I have a website (www.fullforcecreative.com) that displays properly on I.E. and Firefox. I just recently pulled it up in Google Chrome, and it appears no style sheets are being imported. I then thought "that is strange, but Safari is based on the same thing (kinda), so I'll load it in Safari." Same issue. No style sheets. Has anyone seen anything like this before? I link to one style sheet in the header. Code:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css; charset=utf-8" media="screen" />
This style sheet linked to from that line: Code: @charset "UTF-8"; @import url(yaml/core/base.css); @import url(css/navigation/nav_shinybuttons.css); @import url(css/screen/basemod.css); @import url(css/screen/content.css); @import url(yaml/print/print_003.css); All the other stylesheets open with the Code:
@charset "UTF-8";
@media all {
insert css here
}
The site is using YAML (http://www.yaml.de/en/) as a framework for the CSS. The only issue I could find relativly close to it was this: http://www.davidroessli.com/logs/2007/03/safari_utf8_rendering_glitch_f/ I made the change listed there (because the CSS stylesheets are in UTF-8), but it made no difference. Does anyone have any ideas? This is driving me up the wall. It does display properly in I.E. and firefox. Thanks, seth I am installing a CSS Theme on wordpress...and modified the theme in FireFox...now the theme will not show up at all in ie7, 6 or 5.5...I must be doing something wrong... The wordpress blog is at cattyshackcreations.com/thebuzz ***SHOWS UP GREAT IN FIREFOX BUT NOT AT ALL IN IE*** the css is located at cattyshackcreations.com/thebuzz/wp-content/themes/pink-4-october/style.css the theme originally had a seperate style sheet for ie6...maybe I need to correct something here...not real sure... cattyshackcreations.com/thebuzz/wp-content/themes/pink-4-october/ie6.css any help would be appreciated... Hi I'm having some problems with CSS and was hoping that somebody on here could help me. Firstly despite having a container (wrap) div set to a padding of : 0px auto; the site is not centering. Second none of my images are showing, I've attempted to add a background and header image but neither are showing. I'm a little confused because the same methods work fine on my wordpress site. Here is a link to the dev site; C:\Users\Keith\Documents\Site\index.html And below is the CSS code; Code: /* ------------------------------
HTML Redefine Tags
------------------------------ */
body {
width: 100%;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background: url (img/background.jpg) no-repeat bottom;
}
input, form, textarea
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
h1 {
font-size: 18px;
}
h2 {
font-size: 14px;
color: #999999;
}
h3 {
font-size: 13px;
border-bottom: solid 1px #DEDEDE;
padding: 4px 0;
margin-bottom: 10px;
}
a:link, a:visited {
color: #0033CC;
}
a:hover {
text-decoration: none;
}
/* ------------------------------
PAGE STRUCTURE
------------------------------ */
/* #container has an absolute width (780 pixel) */
#container {
width: 1024px;
background: #ececec;
margin: 0px auto;
}
#topbar {
width: 1000px;
height: 118px;
display: block;
background: url(img/header.png);
float: left;
position: relative
}
#navbar {
width: auto;
display: block;
height: 28px;
}
#navbar a {
heigth: 28px;
line-height: 28px;
padding: 0 8px;
display: inline;
}
#main {
width: auto;
display: block;
padding: 10px 0;}
#column_left {
width: 332px;
height: 387px;
margin-right: 1px;
margin-left: 13px;
background: #000;
float: left;
}
#column_right {
width: 332px;
height: 387px;
margin-right: 1px;
background: #000;
float: left;
}
#column_right_adsense {
width: 332px;
height: 387px;
background: #000;
float: left;
}
div.spacer {
clear: both;
height: 10px;
display: block;
}
#footer {
width: 1000px;
height: 150px;
display: block;
margin: 0 13px;
padding: 10px 13px;
font-size: 11px;
color: fff;
background: #737373;
}
Hi, I had this working but somehow it's not working again. The problem I am having is that scroll bars are showing up in my iframe in Firefox, Opera, and Safari, but not IE7 and IE6. Here is the link: http://www.caillouette.com/NewCatsMeow/ I know I need to tighten up my style sheet, but if someone could tell me how to solve this, I would be very happy. Here's the iframe code in the index page: Code: <div id="bodyInfo"> <iframe name="mainBody" width="770" height="602" src ="body.html" scrollbars="NO" border="0"> </iframe> <!-- end #bodyInfo --></div> Something I think I'm not doing. I'm using something called niftyCorners and thought that was what was cauing the problem, but now I'm not so sure. I am trying to have this appear on a webpage for the reader to use: <script language="JavaScript"> <!-- alert("Sample JavaScript alert box 1."); alert("Sample JavaScript alert box 2"); alert("There you go, alert boxes \nTa da, and one with a new line!"); // --> </script> Now, I need to have the <pre> tag nested inside a div tag, but this doesn't validate. So, I nested the code tag inside the pre tag and it breaks my layout in IE 6.0. Why am I nesting at all? niftyCorners doesn't work very well when you put padding or margin on any div you want to have rounded corners. So, I'm trying to put a div round my pre tag, so I can round the div and I can use the pre tag to control margin/padding. If anyone has any ideas, I'd appreciate it. Alright.. I'm having a hard time trying to get this to work in the various browsers. Essentially what I'm doing is creating a navigational bar at the top, with one of the links containing a pure CSS drop down menu. Seems to work fine (in IE 6 and FF... need to test in IE7, NS, and Opera. I don't have IE7, so can't test there). I have placed an image above the navigational bar as well. I'm trying to get the navbar centered on the page (can't seem to get it centered. I'm also trying to make the width of the navbar, say 700px or 80% or whatever.. but as long as it's centered in all the browsers... Any ideas on making this right, or even cleaning up the code? Thanks. Here's the code for the HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="menu5.css" />
<style>
body {background-color:#fdeadc;
text-align:center;
.container {
background-image:url('images/navbar.jpg');
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
</style>
</head>
<body>
<div class="logo">
<img src="images/logo.jpg">
</div>
<div class="container clearfix">
<div class="navbar">
<ul class="menu5">
<li><a href="#">Home</a></li>
<li><a href="#">Company</a></li>
<li><a class="drop" href="#">Services<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Why Our Service</a></li>
<li><a href="#">Why Our Site</a></li>
<li><a href="#">How does it work</a></li>
<li><a href="#">Message Analysis</a></li>
<li><a href="#">Message Handling</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Trial</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Client Login</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS Code: Code:
/* commom style for all browsers */
.menu5 {
width:625px; margin:auto; text-align:left; position:relative; padding:0; list-style-type:none;
}
.menu5 ul {
padding:0; margin:0; list-style-type:none; /* for Firefox */
}
.menu5 li {
float:left; position:relative;
}
.menu5 li a, .menu5 li a:visited {
text-align: left; display:block; text-decoration:none; float:left; padding-right:1em; line-height:2.5em; height:2.5em; color:#dd0b14;
}
.menu5 li ul {
visibility:hidden; position:absolute; left:0; height:0; overflow:hidden;
}
.menu5 table {
margin:-1px; border-collapse:collapse; /* font size for IE5.5 */
}
/* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menu5 li:hover a,
.menu5 li a:hover {
text-decoration:underline; border:0; color:#dd0b14;
}
.menu5 li:hover ul,
.menu5 li a:hover ul {
visibility:visible; height:auto; background:#fff; border:1px solid #ddd; left:0; top:2.5em; overflow:visible;
}
.menu5 li:hover ul li a,
.menu5 li a:hover ul li a {
display:block; font-weight:normal; background:transparent; text-decoration:none; height:auto; line-height:1em; padding:0.5em;
}
* html .menu5 li a:hover ul li a {
width:10em; w\idth:9em; /* hack for IE5.5 */
}
.menu5 li:hover ul li ul,
.menu5 li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; overflow:hidden;
}
.menu5 li:hover ul li a:hover,
.menu5 li a:hover ul li a:hover {
text-decoration:underline;
}
.menu5 li:hover ul li:hover ul,
.menu5 li a:hover ul li a:hover ul {
visibility:visible; border:1px solid #ddd; height:auto; background:#fff;
}
.menu5 li:hover ul li:hover ul li a,
.menu5 li a:hover ul li a:hover ul li a {
display:block; height:auto;
}
.menu5 li:hover ul li:hover ul li:hover a,
.menu5 li a:hover ul li a:hover ul li a:hover {
text-decoration:underline;
}
I'm confused as to what's causing this... http://www.houndsandme.com/ It looks great in FireFox of course... but in IE6 the #column div is longer than it's supposed to be so that the background of the inner elements doesn't cover it all the way. It's almost like either the padding of the #column div, or the margin of the inner div (but only the last one) is incorrect... Also, have a look at IE7 for some really strange happenings... Make sure you scroll over the nav links So basically here's the problem.... I'm using a jquery folder tree. By default, there is a plus and minus sign designating expanded or collapsed. If you click the sign only, would the menu expand/collapse. However, for my needs, I need the entire name beside the sign to be clickable as well. So I adjusted certain items and it works... in Opera, Firefox, Safari, Flock, and Chrome... (All latest versions I just downloaded today). It doesn't, however, work in IE6 (yes.. I still use IE6). Have not tested in IE7 or IE8... I posted this in the CSS forum as it seems as though it's a CSS problem as opposed to Javascript or PHP... Anyways... here's the CSS file: Code:
.treeview, .treeview ul {
padding: 0;
margin: 0;
list-style: none;
}
.treeview ul {
background-color: white;
margin-top: 4px;
}
.treeview .hitarea {
background: url(images/treeview-default.gif) -64px -25px no-repeat;
height: 16px;
width: 100px;
margin-left: -16px;
float: left;
cursor: pointer;
}
/* fix for IE6 */
* html .hitarea {
display: inline;
float:none;
}
.treeview li {
margin: 0;
padding: 3px 0pt 3px 16px;
}
.treeview a.selected {
background-color: #eee;
}
#treecontrol { margin: 1em 0; display: none; }
.treeview .hover { color: red; cursor: pointer; }
.treeview li { background: url(images/treeview-default-line.gif) 0 0 no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }
.treeview .expandable-hitarea { background-position: -80px -3px; }
.treeview li.last { background-position: 0 -176px }
.treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(images/treeview-default.gif); }
.treeview li.lastCollapsable { background-position: 0 -111px }
.treeview li.lastExpandable { background-position: -32px -67px }
.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }
.treeview-red li { background-image: url(images/treeview-red-line.gif); }
.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(images/treeview-red.gif); }
.treeview-black li { background-image: url(images/treeview-black-line.gif); }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(images/treeview-black.gif); }
.treeview-gray li { background-image: url(images/treeview-gray-line.gif); }
.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(images/treeview-gray.gif); }
.treeview-famfamfam li { background-image: url(images/treeview-famfamfam-line.gif); }
.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(images/treeview-famfamfam.gif); }
.filetree li { padding: 3px 0 2px 16px; }
.filetree span.folder, .filetree span.file { padding: 1px 0 1px 16px; display: block; }
.filetree span.folder { background: url(images/folder.gif) 0 0 no-repeat; }
.filetree li.expandable span.folder { background: url(images/folder-closed.gif) 0 0 no-repeat; }
.filetree span.file { background: url(images/file.gif) 0 0 no-repeat; }
Here's the relevant nav menu code: Code:
if (mysql_num_rows($result) != '0') {
while($row = mysql_fetch_array($result)) {
$string5= $row['string'];
$state3 = $row['state'];
$county3 = $row['county'];
$city3 = $row['city'];
$item3 = $row['item'];
if ($state2 != $state3) {
if ($i != 1) {
$treeview .= "</ul></li></ul></li></ul></li>";
}
$i++;
$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a></div><br />";
$state2 = $state3;
$j = 1;
}
if ($county2 != $county3) {
if ($j != 1) {
$treeview .= "</ul></li></ul></li></ul>";
}
$j++;
$treeview .= "<ul style=\"display:none;\">";
$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a></div><br />";
$county2 = $county3;
}
if ($city2 != $city3) {
$treeview .= "<ul style=\"display:none;\">";
$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a></div><br />";
$city2 = $city3;
$treeview .= "<ul style=\"display:none;\">";
}
if ($item3) {
$treeview .= "<li>".$item3."</li>";
$item2 = $item3;
}
}
}
$treeview .= "</ul></li></ul></li></ul></li></ul>";
There are 3 lines of code that I have changed from when it works: Code: $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a></div><br />"; $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a></div><br />"; $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a></div><br />"; From the above 3 lines, the only thing I did which seemed to break the code was move the </div> from in front of <a href ...> to after </a> So the original lines (where it worked) looked like: Code: $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a><br />"; $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a><br />"; $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a><br />"; EDIT: Ok... so not everything works in the other browsers either. Basically if I hit refresh with the new code, then collapse and expand seem to work in reverse.... So not sure how to correct this, but any help would be appreciated... Here is what it looks like (Screen shots): Working Properly in FF After a refresh in Firefox (This is after hitting collapse) Working Properly in IE6 (Before making the changes mentioned above) Not Working in IE6 The site is not currently accessible which is why I'm including screen shots. However, if you need to see them, let me know and I will make it live.... Heading out now, so was trying to get a post up at least before I left... Thanks.. if you need further information or additional code, let me know. Any help would, of course, be appreciated. Please help! I've got two rounded boxes one is contained in the other. If the innerbox grows, the outer box should grow with it. Firefox does a great job and grows with it but IE7 doesn't grow, any help would be greatly appreciated. here's the CSS i've used for IE: Code: /* first rounded box */
/* images are set in the index.php */
/* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 14px;
font-size: 1px;
}
/*.rbroundbox { width: 60em; margin: auto; background-color: #37a5f0;} */
.rbroundbox { position: absolute; top: 15px; width: 800px; margin: 5em 0 0 2em; background-color: #37a5f0; }
.rbcontent { margin: 0 14px; min-height: 570px; height: 100%; }
/* EOF first rounded box */
/* second rounded box */
/* images are set in the index.php */
/* height and width details */
.rbtop2 div, .rbtop2, .rbbot2 div, .rbbot2 {
width: 100%;
height: 24px;
font-size: 1px;
}
/*.rbroundbox { width: 60em; margin: auto; }*/
.rbroundbox2 { position: absolute; top: 5px; width: 577px; margin: 9.5em 0 0 12em; background-color: #9cd5f0;}
.rbcontent2 { margin: 0 14px; min-height: 375px; }
/* EOF second rounded box */
here's the html i've used: Code: <body>
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
<div class="rbroundbox2">
<div class="rbtop2"><div></div></div>
<div class="rbcontent2">
<p><?=$content?></p>
</div><!-- /rbcontent2 -->
<div class="rbbot2"><div></div></div>
</div><!-- /rbroundbox2 -->
</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div>
<!-- /rbroundbox -->
</body>
Hi there, I'm trying to get the images from each page to be centered in their td's, which appears to work fine in FF, but not in IE. Any help is greatly appreciated. here's the css; Code:
.borders {
border: 1px solid #666666;
text-align:left;
font-family:Century Gothic, Arial, sans-serif;
font-size:11px;
align:center;
}
}
.text {
font-family:Century Gothic, Arial, sans-serif;
font-size: 11px;
color: #333333;
text-align:center;
}
}
.listtext {
font-family:Century Gothic, Arial, sans-serif;
font-size: 11px;
color: #333333;
text-align:left;
border: 1px solid #666666;
}
table.menu {
border:1px solid #999999;
background:#CCCCCC;
align:center;
}
table.menu a:link, table.menu a:visited {
display:block;
font-family:Century Gothic, Arial, sans-serif;
font-size:12px;
line-height:16px;
color:#006600;
text-decoration:none;
padding: 2px 2px;
}
table.menu a:active, table.menu a:hover {
color:#CCCCCC;
background:#006600;
}
table.menu a {
width:144px;
display:block;
font-family:Century Gothic, Arial, sans-serif;
font-size:12px;
line-height:16px;
color:#006600;
text-decoration:none;
padding: 2px 2px;
}
.GPlink {
font-famil:Century Gothic, Arial, sans-serif;
font-size:10px;
color:#000000;
}
.GPlink a {
font-family:Century Gothic, Arial, sans-serif;
font-size:10px;
align:center;
color:#333333;
}
.pagetitletext {
font-family:Century Gothic, Arial, sans-serif;
font-size:13px;
align:left;
color:#006600;
font-weight:bold;
}
.piccenterind
{width: 212px; margin-left: auto; margin-right: auto;}
.piccentercont
{width: 322; margin-left: auto; margin-right: auto;}
and the html; Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Kyrtsakas Law - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Kyrtsakas Law Office - Title Insurance from an experienced Real Estate Lawyer offers the best protection for your investment">
<meta name="keywords" content="Kyrtsakas, Law, Law Office, Lawyer, real estate, estate, will, title, Windsor, purchases, mortgages, power of attorney, attorney, CAW">
<link href="kyrtsakas_styles.css" rel="stylesheet" type="text/css">
</head>
<body topmargin="0" bgcolor="#666666">
<table width="640" align="center" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC" class="menu">
<tr valign="top">
<td align="center" width="640" colspan="6">
<img src="images/Kyrtsakas_Header.jpg" alt="Kyrtsakas Law Office" name="header" id="header">
</td>
</tr>
<tr valign="top">
<td class="borders" width="106" colspan="1">
</td>
<td class="borders" width="106" colspan="1">
<a href="http://www.kyrtsakaslaw.com">Home</a>
</td>
<td class="borders" width="106" colspan="1">
<a href="http://www.kyrtsakaslaw.com/profile.htm">Profile</a>
</td>
<td class="borders" width="106" colspan="1">
<a href="http://www.kyrtsakaslaw.com/tools.htm">Online Tools</a>
</td>
<td class="borders" width="106" colspan="1">
<a href="http://www.kyrtsakaslaw.com/contact.htm">Contact</a>
</td>
<td class="borders" width="106" colspan="1">
</td>
</tr>
<tr valign="top">
<td class="borders" width="106" colspan="1">
</td>
<td width="212" colspan="2" class="borders">
<br>
<div class="pagetitletext">Home</div><br>
Welcome to <b>Kyrtsakas Law Office</b>.<br><br>
<b>Christos Kyrtsakas</b>, <b>L L .B.</b><br><br>
"For Nineteen years I have practiced law with an emphasis on <b>Real Estate</b>, including <b>Purchases, Sales, Mortgages</b>,
and <b>Estate Law</b>, including <b>Wills, Powers of Attorney, and Probate</b>."<br><br>
Call me today at (519)-974-6303 for an appointment to discuss your particular needs.<br><br>
CAW Plan Welcome!<br><br>
"<i>Having a Lawyer Makes it Safer for You</i>!"<br><br>
</td>
<td colspan="2" width="212">
<div class="piccenterind"><img src="images/Kyrtsakas_sign_sm.jpg"></div>
</td>
<td class="borders" width="106" colspan="1">
</td>
</tr>
<tr valign="top">
<td class="borders" width="106" colspan="1">
</td>
<td class="borders" width="428" colspan="4">
</td>
<td class="borders" width="106" colspan="1">
</td>
</tr>
</table>
<table bgcolor="#CCCCCC" align="center" width="640">
<tr>
<td align="center" class="GPlink" colspan="6">
website designed & maintained by <a href="http://www.graphixplus.com" target="_blank">Graphix Plus Web Development</a> - 2005
</td>
</tr>
</table>
</body>
</html>
Hi. Having some trouble with IE (as per usual) and css. I have a container with the id "text". On a normal page, the styling for an unordered list is to use my own bullet point image and have a margin of 20px (as IE sees fit to hide the bullets off the left edge). However, on my sitemap page, inside the text div, there is a div called sitemap and I have written the style of ul's in this div to have no list-style. Of course in ff and opera this works fine and the lists have no style, but IE persists in using the bullet image. It seems like it's taking the rule: div#text ul { list-style: url(blah blah blah) etc. } to be the only ul styling rule, and anything which contradicts it is ignored: div#text div#sitemap ul { list-style: none; } Any help would be greatly appreciated, Thanks UPDATE: Just fixed it, still haven't a clue as to why it's happening tho. What I did was to say: div#text div#sitemap ul { list-style: url(); } Can anyone enlighten me as to the cause? Surprise, surprise... [edit]link removed...[/edit] In FF the list of links that represent the toon archive are dispayed as two columns just like I want, but IE isn't performing properly, showing it as one list right under the other... [note] The CSS is in the head, I haven't exported to a seperate file sheet yet since it's still in development. [/note] |
|||||||