|
CSS - Conditional Comment Issue?
I read through many of the related articles I found through searching the board, but found no solution to my problem.
First question: Do these two CC's, when either is present in the head section, represent two ways of accessing my styles_IE.css file? Code:
<!--[if lte IE 8]>
<style type="text/css" media="all"> @import "css/styles_IE.css"; </style>
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/styles_IE.css" type="text/css" media="screen" />
<![endif]-->
Second: An associate of mine complains that, since I took our new site live a week ago and migrated from my development site, his IE8 no longer makes the drop-down menus drop down. I built a first site a couple years ago using this same Suckerfish, which I found online after someone here recommended it. For my new project I just copied the Suckerfish and CSS and changed the target files and color scheme. Works like a champ. Both my new live and development sites work fine with *my* IE8 (and FF, Opera, Chrome, Safari...), and no one else has told me of any issues. But this guy can no longer navigate our site due to drop-down problems (but he tells me he had no problem with the dev server...weird). Below is a look at my Suckerfish menus and CSS. Thank you very much for any input regarding IE and how I might solve one of its countless and inexcusable foibles... Curtis Code:
<div id="navContainer">
<ul id="nav">
<li><a href="index.php">Home</a>
<ul>
<li><a href="index.php">Home Page</a></li>
<li><a href="about.php">About DT</a></li>
<li><a href="dthc.php">DTHC Board</a></li>
<li><a href="found.php">DT Foundation</a></li>
<li><a href="email.php?email=gen">Contact Us</a></li>
</ul>
</li>
<li><a href="">Events</a>
<ul>
<li><a href="commu.php">Community Service</a></li>
<li><a href="workday.php">Retreats/Workdays</a></li>
<li><a href="history.php">House History</a></li>
</ul>
</li>
<li><a href="">Alumni</a>
<ul>
<li><a href="email.php?email=addrChng">New Contact Info?</a></li>
<li><a href="dues.php">Dues/Donations</a></li>
<li><a href="pclass.php">Pledge Classes</a></li>
<li><a href="missing.php">The Missing</a></li>
<li><a href="memorial.php">Memorial</a></li>
</ul>
</li>
<li><a href="">Up & Down</a>
<ul>
<li><a href="minutes.php">Newsletters / Minutes</a></li>
<li><a href="manuals.php">Manuals and Docs</a></li>
<li><a href="upTheRiver.php">Upload Center</a></li>
<li><a href="vision.php?view=visi">Our Vision</a></li>
</ul>
</li>
<li><a href="">Grab Bag</a>
<ul>
<li><a href="common.php?page=dtBusi">DT Businesses</a></li>
<li><a href="gallery.php">Scrap Book</a></li>
<li><a href="direc.php">Online Directory</a></li>
<li><a href="mailList.php?page=main">DT Mail List</a></li>
<li><a href="lilsis.php">Little Sisters</a></li>
</ul>
</li>
</ul><!-- end ul #nav -->
</div><!-- end navContainer -->
Code:
#navContainer {
z-index:3; width:100%; text-align:left;
border:0px solid #ddd; margin:0 auto; padding-bottom:1.3em
}
#nav, #nav ul {
font-size:1.0em; float:left; width:665px;
list-style:none; line-height:1; background:#bfe2f9;
font-weight:bold; padding:0; border:solid #999; border-
width:0 0 1px 0; margin:0 0 0 0
}
#nav ul{background:#bfe2f9;}
#nav {padding-left:6em}
#nav a {
display:block; width:10em; w\idth:6em;
color:#db2438; text-decoration:none; padding:0.25em 0.4em
}
#nav a.topDrop {
background:url(../pics/rightArrowYellow.gif)
center right no-repeat;
}
#nav li {float:left; padding:0; width:8.5em}
#nav li ul {
position:absolute; left:-999em; height:auto;
width:9.8em; w\idth:9.2em; font-weight:normal; border-
width:0.1em; margin:0; z-index:1000
}
#nav li li {padding-right:0.9em; width:7.5em}
#nav li ul a {width:13em; w\idth:9em}
#nav li ul a:hover {
width:13em; w\idth:9em; color:blue;
text-decoration:underline
}
#nav li ul ul {margin:-1.75em 0 0 10.4em}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul,
#nav li.sfhover ul ul ul {
left:-999em
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav
li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto
}
#nav li:hover, #nav li.sfhover {background:#bfe2f9}
Similar TutorialsHello forum, I've been breaking my head trying to find the solution for this, but can't seem to solve it. I have pinpointed the problem though. I have this site which looks terrible on IE because the background shakes, so I removed a property from the body selector which makes the background fixed. So I only want users using IE to load that CSS stylesheet by using conditional comment. The thing is when loading the website that IE stylesheet is getting overlapped by the main CSS stylsheet so the body property is added again. I know this is what's going on because when I remove the original CSS stylesheet from the server, the IE stylesheet loads up and the page looks as it should in IE. So do you guys have any ideas on how to NOT load the original stylesheet on IE explorers? Thank you! website: http://prueba.stu.com.mx That's the CSS causing the problem and how it looks on every browser except IE: Code:
body {
background-image: url(_images/patternBG.jpg);
background-repeat: repeat;
background-position: left top;
background-attachment:fixed; }
How it looks on IE: Code:
body {
background-image: url(_images/patternBG.jpg);
background-repeat: repeat;
background-position: left top; }
Hey everyone. So I've gotten the drop down menu to work in IE and Firefox until the client wanted to only have one of the menu items be a drop down menu. I used conditional comments based on the tutorials found on CSSPlay but the menu is stuck in one location in IE. Please help! I also don't understand why the content box's type is now centered in IE. Http://www.thehomecollection.com Thank you for your efforts everyone! -Garrick- 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <!-- Header --> <div id="header"> <!-- Search --> <div id="search"> <form> <input type="hidden" name="restrict" value="/your_site" /> <input type="hidden" name="exclude" value="" /> <img src="images/img_search.jpg" alt="" /> <input type="text" name="words" size="19" value="" /> <input type="image" class="button" src="images/btn_go.gif" alt="submit_button" /> </form> </div> </div> <!-- Top Navigation --> <div id="nav"> <ul id="top_nav"> <li id="nav_home"><a href="index.html"></a></li> <div class="menu"> <ul> <li id="nav_shop"><a href="index.html"><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table class="shop"><tr><td><![endif]--><ul><li><a href="index.html">Versace</a></li><li><a href="index.html">Calvin Klein</a></li><li><a href="index.html">Versace</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul> </div> <div style="float: left;"> <li id="nav_service"><a href="index.html"></a></li> <li id="nav_email_signup"><a href="index.html"></a></li> <li id="nav_account"><a href="index.html"></a></li> <li id="nav_bag"><a href="index.html"></a></li> <li id="nav_checkout"><a href="index.html"></a></li> </div> </ul> <!-- Product Category Navigation --> <!-- Menu Start --> <div id="product_nav"> <ul> <li><a href="giftware/index.html"><img src="images/menu_home_gift.jpg" /></a></li> <li><a href="lux_bedding/index.html"><img src="images/menu_home_bedding.jpg" /></a></li> <li><a href="dinnerware/index.html"><img src="images/menu_home_dinner.jpg" /></a></li> <li><a href="stemware/index.html"><img src="images/menu_home_stem.jpg" /></a></li> <li><a href="lighting/index.html"><img src="images/menu_home_light.jpg" /></a></li> <li><a href="furniture/index.html"><img src="images/menu_home_furniture.jpg" /></a></li> <li><a href="accessories/index.html"><img src="images/menu_home_access.jpg" /></a></li> <li ><a href="sale/index.html"><img src="images/menu_home_sale.jpg" /></a></li> </ul> </div> <!-- Menu End --> </div> <div id="content"> <p>Content goes here.</p><br /> </div> <div id="footer"></div> </div> </body> </html> css Code: body {
background-color: #F5F5F4;
color: #000000;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
#wrapper {
margin: 0 auto;
width: 760px;
text-align: left;
}
table, ul, li {
margin: 0;
padding: 0;
}
img {
margin: 0;
padding: 0;
border: none;
}
p {
margin: 0 0 10px 0;
padding: 0;
}
a:link, a:visited {
color: #FF0000;
text-decoration: underline;
}
a:hover, a:visited:hover {
color: #FFFF00;
text-decoration: underline;
}
#header {
background: url(images/header.jpg) scroll no-repeat;
height: 89px;
margin: 0;
padding: 0;
width: 760px;
}
#search {
margin: 0;
padding: 0 20px;
float: right;
position: relative;
top: 48px;
}
/* IE hack start */
html[xmlns] #search {
top: 47px;
}
/* IE hack start */
#search .button {
position: relative;
top: 1px;
}
/* IE hack start */
html[xmlns] #search .button {
position: relative;
top: 3px;
}
/* IE hack start */
#nav {
height: 58px;
margin: 0;
padding: 0;
width: 760px;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
#nav_home {
background: url(images/top_nav.jpg) no-repeat scroll;
width: 80px;
height: 27px;
display: block;
float: left;
}
#nav_home a {
width: 80px;
height: 27px;
display: block;
}
#nav_home a:active {
background: url(images/top_nav.jpg) no-repeat scroll 0 -27px;
}
#nav_shop {
background: url(images/top_nav.jpg) no-repeat scroll -80px 0;
width: 110px;
height: 27px;
display: block;
float: left;
}
.menu {
padding: 0;
margin: 0;
width: 110px;
height: 27px;
z-index: 600;
background: #ffffff;
top: 0px;
float: left;
}
.menu img {margin: 0; padding: 0; border: none;}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.menu ul ul {
width: auto;
}
.menu ul ul li {
float: left;
width: 100%;
position: relative;
background: #ffffff;
}
.menu ul ul {filter: alpha(opacity=75);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
-moz-opacity: 0.75; opacity:0.75;
}
.menu li {
float: left;
width: auto;
position: relative;
}
.menu ul ul a, .menu ul ul a:visited {
display: block;
width: 100%;
height: 100%;
font-size: 11px;
text-decoration: none;
color:#000000;
background:#ffffff;
padding: 5px;
}
/* IE hack start */
html[xmlns] .menu ul ul a, .menu ul ul a:visited {
width: auto;
}
/* IE hack start */
.menu ul ul {
visibility: hidden;
position:absolute;
height: 0px;
top: 27px;
left: 0;
}
.menu ul :hover ul{
visibility:visible;
display: block;
}
.menu a:hover {
color:#000000;
background:#ffffff;
}
.menu ul ul a:hover{
color:#ffffff;
background:#777777;
}
.menu :hover > a {
color:#000000;
background:#ffffff;
}
.menu ul ul :hover > a {
color:#ffffff;
background:#777777;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:27px;
t\op:27px;
}
/* style the table so that it takes no part in the layout - required for IE to work */
.menu table.shop {position:absolute; top:0; left:0; width: 100%;}
#nav_bag {
background: url(images/top_nav.jpg) no-repeat scroll -544px 0;
width: 106px;
height: 27px;
display: block;
float: left;
}
#nav_bag a {
width: 106px;
height: 27px;
display: block;
}
#nav_bag a:active {
background: url(images/top_nav.jpg) no-repeat scroll -544px -27px;
}
#nav_account {
background: url(images/top_nav.jpg) no-repeat scroll -445px 0;
width: 99px;
height: 27px;
display: block;
float: left;
}
#nav_account a {
width: 99px;
height: 27px;
display: block;
}
#nav_account a:active {
background: url(images/top_nav.jpg) no-repeat scroll -445px -27px;
}
#nav_checkout {
background: url(images/top_nav.jpg) no-repeat scroll -650px 0;
width: 110px;
height: 27px;
display: block;
float: left;
}
#nav_checkout a {
width: 110px;
height: 27px;
display: block;
}
#nav_checkout a:active {
background: url(images/top_nav.jpg) no-repeat scroll -650px -27px;
}
#nav_service {
background: url(images/top_nav.jpg) no-repeat scroll -191px 0;
width: 127px;
height: 27px;
display: block;
float: left;
}
#nav_service a {
width: 127px;
height: 27px;
display: block;
}
#nav_service a:active {
background: url(images/top_nav.jpg) no-repeat scroll -191px -27px;
}
#nav_email_signup {
background: url(images/top_nav.jpg) no-repeat scroll -318px 0;
width: 127px;
height: 27px;
display: block;
float: left;
}
#nav_email_signup a {
width: 127px;
height: 27px;
display: block;
}
#nav_email_signup a:active {
background: url(images/top_nav.jpg) no-repeat scroll -318px -27px;
}
/* Prodcts Navigation */
#product_nav {
margin: 0;
padding: 0;
float: left;
width: 760px;
}
#product_nav ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#product_nav li {
margin: 0;
padding: 0;
display: inline;
float: left;
}
#content {
background-color: #ffffff;
margin: 0;
padding: 20px;
width: 720px;
clear: both;
}
/* remove comments to add footer
#footer {
background: url(images/footer.jpg) scroll no-repeat;
height: 10px;
margin: 0;
padding: 0;
width: 760px;
}
*/
Hello, I'm new to CSS but code is beginning to make more sense, for the most part. I've been able to transform an existing template into something more custom. The theme over all has turned out well and I'm happy with it. There is one snag that I'm running into and I really would appreciate someone with more experience and a better understanding of css framework to give me guidance. The issue: The "Comments/Respond" section for each blog post is getting pushed down rather far and there are odd little blue dots showing up to the right, just below the post itself, but before the beginning of the comments section. Now, I did try plugging the CSS code into the validation service and have found some warnings. The thing is, many of these issues were in the template (I didn't change them or edit them). So would the errors that the validation tool found be interfering with how the comment section is getting pushed down? Example of errors: Quote: 318 input[type="text"], textarea Property box-shadow doesn't exist in CSS level 2.1 but exists in : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1) 319 input[type="text"], textarea Property -moz-box-shadow doesn't exist : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1) 320 input[type="text"], textarea Property -webkit-box-shadow doesn't exist : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1) 823 .wp-caption Property -moz-border-radius-bottomleft doesn't exist : 3px 3px 824 .wp-caption Property -moz-border-radius-bottomright doesn't exist : 3px 3px 825 .wp-caption Property -moz-border-radius-topleft doesn't exist : 3px 3px 826 .wp-caption Property -moz-border-radius-topright doesn't exist : 3px 3px 1149 .submitbutton Value Error : float attempt to find a semi-colon before the property name. add it 1286 pre Property -webkit-text-size-adjust doesn't exist : 140% 140% 1289 code Property -webkit-text-size-adjust doesn't exist : 160% 160% 1296 #access, .entry-meta, .entry-utility, .navigation, .widget-area Property -webkit-text-size-adjust doesn't exist : 120% 120% 1299 #site-description Property -webkit-text-size-adjust doesn't exist : none none The thing is, I'm rather confused as to where to pinpoint the gap. In the CSS stylesheet the blog posts which are called out as "Content" live under an id called "Main". The comments seem to live under Main as well and seem to be in their own segment. I just can't figure out how to either pull the comment segment/table whatever you'd call it up more snug with the post, or eliminate whatever excess space is pushing comments down so far and causing the mysterious blue dots. I would post a link to what I'm talking about but I'm too new to the forum. Thanks in advance! Hey! My layout is working fine on every other browser except IE7. I would need to make the footer height 70px on IE7 instead of the usual 45px. Code:
.footer {
background: #6cbdf0;
height: 45px;
[if IE 7]height: 70px;
padding-top: 5px;
clear: both;
background-repeat: repeat-x;
bottom: 0px;
position: relative;
}
According to what I got from a tutorial online, that should solve the issue. However, when I test it on IE7 nothing has changed... How could I make it work? Thank you very much! I need a way to apply a different style to IE6 and IE7/Firefox. The webpage renders as expected in IE7/Firefox but IE6 needs to be fixed. Here is a mockup of what I need to have: Code:
.featdesc
{
margin-left: 10px;
margin-top: 10px;
width: 400px;
text-align: justify;
if (ie6)
font-size: 11pt;
else
font-size: 10pt;
color: #505050;
}
Is there a way to accomplish this? I purchased a template for my admin area (didn't want to be bothered with the design, prefer to work on the functionality), and I noticed it had a lot of comments like the following: PHP Code: <!--[if !IE]>start login<![endif]--> <!--[if !IE]>end login<![endif]--> Are these just basically regular comments? I am not sure why the if statements are in there. can anyone tell me what is this..mean by Quote: Hello, I have some CSS that I'm using to implement zoom on an iframe I found that it needed to look like this for IE7: Code:
<style type="text/css">
.outerWrapper { width: 100%; height: 100%; padding: 0; overflow: hidden; margin-top: 10px; margin-left: 0px; float:left;}
.wrapper { width: 500px; height: 350px; padding: 0; overflow: hidden; margin-top: 0px; margin-left: 0px; float:left;}
.iFrameClass { width: 510px; height: 357px; border: none; padding: 0; margin-top: -50px; margin-left: -52px; }
.iFrameClass {
zoom: 1.00;
-moz-transform: scale(1.0);
-moz-transform-origin: 50% 50%;
-o-transform: scale(1.0);
-o-transform-origin: 50% 50%;
-webkit-transform: scale(1.0);
-webkit-transform-origin: 50% 50%;
}
</style>
and this for IE8: Code:
<style type="text/css">
.outerWrapper { width: 100%; height: 100%; padding: 0; overflow: hidden; margin-top: 10px; margin-left: 0px; float:left;}
.wrapper { width: 500px; height: 350px; padding: 0; overflow: hidden; margin-top: 0px; margin-left: 0px; float:left;}
.boxiFrameClass { width: 510px; height: 357px; border: none; padding: 0; margin-top: -50px; margin-left: -52px; }
.boxiFrameClass {
-ms-zoom: 1.00;
-ms-transform-origin: 50% 50%;
-moz-transform: scale(1.0);
-moz-transform-origin: 50% 50%;
-o-transform: scale(1.0);
-o-transform-origin: 50% 50%;
-webkit-transform: scale(1.0);
-webkit-transform-origin: 50% 50%;
}
</style>
What's odd is that ie8 converts -ms-zoom to just plain ZOOM in the DOM, but it doesn't like the IE7-style markup. I decided to try to make both happy using conditional comments, and figured that since it's all browser dependent anyway, I'd make everything conditional like so: So I changed it to: Code:
<style type="text/css">
.outerWrapper { width: 100%; height: 100%; padding: 0; overflow: hidden; margin-top: 10px; margin-left: 0px; float:left;}
.wrapper { width: 500px; height: 350px; padding: 0; overflow: hidden; margin-top: 0px; margin-left: 0px; float:left;}
.iFrameClass { width: 510px; height: 357px; border: none; padding: 0; margin-top: -50px; margin-left: -52px; }
.iFrameClass {
[if lte IE 7] zoom: 1.00;
[if gte IE 8] -ms-zoom: 1.00;
[if gte IE 8] -ms-transform-origin: 50% 50%;
[if Gecko] -moz-transform: scale(1.0);
[if Gecko] -moz-transform-origin: 50% 50%;
[if Opera] -o-transform: scale(1.0);
[if Opera] -o-transform-origin: 50% 50%;
[if Webkit] -webkit-transform: scale(1.0);
[if Webkit] -webkit-transform-origin: 50% 50%;
}
</style>
The problem is that now, the zoom isn't working any any browsers, whereas before I could make it work ok in either (IE8, FF, and Chrome) or (IE7, FF, and Chrome), depending on the markup. Am I doing something wrong in the way I'm doing conditional comments? Thanks, Eric I need to hide the following code from IE 7 But I can't quite get the conditional comments to work. Code:
#fullc p a em {
padding-top: 190px;
right: auto;
text-align: center;
width:500px;
height: auto;
min-height: 190px;
display: block;
_display: none;
}
This is what I've tried so far: Code: <!--[if !IE 7]>
#fullc p a em {
padding-top: 190px;
right: auto;
text-align: center;
width:500px;
height: auto;
min-height: 190px;
display: block;
_display: none;
}
<![endif]-->
And this: Code: <!--[if IE 7]>
#fullc p a em {
padding-top: 0;
right: 0;
text-align: center;
width:0;
height: 0;
min-height: 0;
display: block;
_display: none;
}
<![endif]-->
Neither of these seem to work. The first one hides it from FF but not IE7 for some reason. Is what I'm trying to do going to work? Hello and thank you in advance for any help! I am trying to add code to my website so that the CSS that is loaded will be based on the user's browser. Specifically, I want to load one CSS if the user is not using IE, and another if they are using IE. This is the code in my HEAD: Code: <link rel="stylesheet" type="text/css" href="css/chooser.css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="css/chooser_ie.css" /> <![endif]--> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="css/chooser_IE6.css" /> <![endif]--> I have tested with FF, Chrome, IE8 and IE6 and it does not work. I am guessing that the "default" stylesheet (chooser.css) is loading, and then either the IE (chooser_ie.css) or IE6 (chooser_ie6.css) is loading in addition to it. But I want only one of these CSS to be loaded. Any help appreciated! LSIRYAN PS: URL = www.languagesystems.com/languagechooser.html I have a seemingly easy requirement to place a comment bubble next to a title in a list of articles that would contain the number of comments it's received. I tried to put an div with the bubble as a background with centered text to put the number of comments in. The only say I seem to be able to do it it either disregards my sizing of the div so the bubble isn't visible, or I set the display to block which puts it on a new line which isn't what I want. My code seems straight forward?: 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body, p, td, div {
font-family:Arial, Helvetica, sans-serif;
font-size:12px
}
div.article {
clear:both;
padding-bottom:60px;
}
div.article img{
float:left;
padding:0px 10px 10px 0px;
}
div.article .articleTitle{
font-size:16px;
font-weight:bold;
color:#36F;
}
div.article .articleDate{
font-size:10px;
font-weight:bold;
color:#666;
}
div.commentBubble{
background-image: url(comment_bubble.gif);
background-repeat: no-repeat;
text-align: center;
display:inline;
color: #666;
font-weight: bold;
font-size: 12px;
width: 32px;
height: 30px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
</style>
</head>
<body>
<div class="article">
<img src="shake.jpg" width="89" height="89" alt="shake" />
<span class="articleTitle">Title of story 1<div class="commentBubble">45</div><br /></span>
<span class="articleDate">July 11, 2011<br /></span>
Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum
text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem
ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.
Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.
</div>
</body>
</html>
A mock up of what I want is simply: URL but I get: URL and a copy of the code to play with is: http://www.kamunga.com/bubble/commentBubble.zip Any help or hints would be greatly appreciated!! I want to use conditional comments to load a style sheet for IE7. When I check the site in IE7 I see images for the content area being placed incorrectly. They are over to the right of the page when they should be in the middle. When I check the images with IE dev bar they have a position of absolute. However the ie_7style.css sheet has them with a position float left. When I link to the ie7style.css without conditional comments and load the page it works as intended. I believe the absolute positioning is coming from the style.css sheet which is intended for Firefox. It seems to me that the ie7style sheet isn't being implemented properly and is relying somewhat on the style.css to render the page. How do I resolve this problem? WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! when reading an identifier in CSS IE will treat two dots in a class decleration as one: accepted rules (strict mode): Code: win ie 5.01: p..class, p./**/.class win ie 5.5 : p..class win ie 6 : p..class, p./**/.class, p./**/class, p/**/.class win ff 1.5 : p./**/class, p/**/.class (comments ignored) win opera : (as firefox) win ns 7.0 : none! Hi everyone, For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine. So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html but I don't see what he did to solve it. Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating . I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions. Thanks in advance if you can give a DIV newbie a heads up. Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>
Hello I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this. Second: In Firefox it looks like a disaster! Help! http://www.tombraiders.net/katie/shelly/index.html User: letme Pass: in Thank you! Hello Guys, I am trying to get the the css to work but having a hard time with it and need some help.. Here is the content lined up in fire fox. http://content.screencast.com/users/dank2009/folders/Jing/media/4198ca5c-6c75-4196-a2e7-ba1c423caca7/2011-08-22_1550.png Ad this is what it looks like in IE (See my issue) http://content.screencast.com/users/dank2009/folders/Jing/media/c9f0dcd6-19c9-48f6-83f8-9c55d7417fcc/2011-08-22_1551.png Here is the code Code: echo '<div class="listing"><img src="'.$listing_photo.'"><span class="listlink"><a href="index.php?content=subcats&id='. $listing_id.'">'.$listing_title2.'</a></span><br><span class="listbody">'.$listing_body2.'<span class="readmore"><a href="index.php?content=subcats&id='. $listing_id.'"> Read more</a></span>>>></div>'; Here is the CSS Code: .listing {
width:560px;
height:auto !important;
margin: 0 auto;
text-align: left
}
.listlink {
float:left;
margin-left: 10px;
margin-top: 20px;
position: absolute;
text-decoration:underline;
}
.listbody {
float: left;
margin-left: 110px;
margin-top: -30px;
width:440px
}
.listingdiv{
border-bottom: 2px dotted #9EABB5;
color:#FFF;
}
Please advise how to fix this.. Thanks for your help in advance.. Dan I'm having trouble pinning down an issue with just one part of a page. I can't seem to figure out if the issue is a css issue or an HTML issue. I have a tab that is under a picture that has a floating height and fixed width. Under the picture when the page first loads a div element that is supposed to be a css tab seems to float over it until I reload the page. When the page is reloaded the tab moves back to its static position. This only happens in IE7 by the way. I am confident this is a css issue http://www.sweetbyholly.com/index2.php The navigation in the site above, in IE7 only, shifts to the left on hover. I can't for the life of me figure out why. Can anyone pinpoint this issue? It seems the second nav item is loosing some margin or padding on the left on hover. I can figure it out. I am not familiar with CSS much at all, I am just edit over and over trying to make something work, I do not know if my problem is CSS or placement of the div in the code. if you visit mypricesavings (dot) com with Firefox it seems to have the footer in its proper place and the google ad is under the discussions, however, if you use google chrome the footer moves to the side of the categories, and the ad moves to the bottom leaving a large white space, and then shifts how do I fix this, thank you Derrick |
|||||||