|
CSS - Comments Show Different In Ie7
Hey,
The comments show different/incorrect for people who use Internet Explorer 7 to visit my website. Firefox, Chrome, Safari, and IE8+ etc all show the comments correctly. My website is: http://www.lilwaynehq.com/2011/05/2...tunes/#comments Here is an example of what it looks like in IE7: I need it to look like this: Does anyone know the problem and how I can fix it? I will also be using an IE7 specific style sheet to make it easier. Thanks. Similar TutorialsI 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. 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've heard that there is a way to use comments in CSS that make certain definitions invisible to certain browsers. Is this true. If so, where can I learn more about this? What are the down sides? Here is a test page... http://www.thedreyersonline.com/test.htm It doesn't look horrible, so I can live with it, but it's designed so that the comments section will actually sit on the bottom like the "onbottom.gif" screenshot... It works if there is enough content in the "content" div prior to the "comments" div, but not when it's short. An alternative solution would be like the "extended.gif" screenshot, but the onbottom shot is preferred. Any help would be greatly appreciated! Thanks Bryan 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? Hey All, I'm currently testing out an idea for using Facebook Comments within a clients site. The space given to input the is very limited so I have implemented an auto scroll using Mootools. Everything seems OK but when you go to the page the scroll bar is not present, so you are unable to scroll down to see the comments towards the bottom and click the page numbers. The only way in which I can make the scroll bar show is if I right click and click Inspect Element both on Firefox and Chrome (it works perfectly!!!). I would appreciate it greatly if someone could have a look and let me know what I am missing and where I have gone wrong. The link to the page is http://www.theblitzparty.com/communityspirit/comments Thanks 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? ...center the menus under my sample header banner? Thank you so much in advance! Here is the page: http://www.toplinepublishing.com/thisisasamplepage.html and here is the css file: http://www.toplinepublishing.com/dropdown.css Thanks! Just curious as to what i'm doing wrong here, its the #content block that isn't working. Any help that could be provided would be greatly appreciated. css Code: Original - css Code body { font-family: Verdana, Tahoma, Arial; color: #FFFFFF; font-size: 11px; } .bg { width: 100%; position: absolute; top: 0; left: 0; z-index: 5000; } #pagecontent { width: 800px; height: 600px; position: relative; z-index: 6000; margin: auto; } #content { width: 800px; background-color: #999999; } #latesttut { width: 381px; height: 150px; border: 3px solid #FFFFFF; float: left; padding-left: 5px; padding-right: 5px; } #latestblog { width: 381px; height: 150px; border: 3px solid #FFFFFF; float: right; padding-left: 5px; padding-right: 5px; } #seperator { width: 800px; height: 5px; float: left; } #latestnews { width: 784px; height: 213px; border: 3px solid #FFFFFF; padding-left: 5px; padding-right: 5px; float: left; } #footer { width: 800px; position: absolute; bottom: 0; } .nav { background-image: url('images/blank1pxl.jpg'); } a:link { text-decoration: none; color: #0066CC; font-size: 9px; } a:hover { text-decoration: underline; color: #0066CC; font-size: 9px; } a:visited { text-decoration: none; color: #0066CC; font-size: 9px; } a:active { text-decoration: none; color: #0066CC; font-size: 9px; }
Please look at www clean and creative dot com in any browser on a PC or MAC and you'll see the logo.png show up ... BUT once you jump on a pc and view the site in Internet Explorer, the logo just disappears? Its weird because none of the styling is messed up, just a missing logo.png? Can anyone help me out on this? I'm looking for a way to show / hide a DIV triggered buy mousing over / clicking on a tab. The action will not navigate away from the page, just show / hide the DIV. I found this script: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm But it seems like a lot of JS overhead. Is there a simpler way? Hi, I am building a website application in which the site uses a common header+footer. The structure is basically Header Content Footer I constructed the header and footer, and it looks ok in IE, but not in Firefox/Chrome/Opera. Even with how it looks in IE, there are some things I want to change and add. I need help to take the current header and footer that I have, along with mock up images that I have, and change to site to my needs. Current site, as viewed in IE http://i15.photobucket.com/albums/a371/techboyjk/site%20project/details_template_ie.jpg Current site, as viewed in FireFox http://i15.photobucket.com/albums/a371/techboyjk/site%20project/details_template_ff.jpg Current site, as viewed in Opera http://i15.photobucket.com/albums/a371/techboyjk/site%20project/details_template_opera.jpg Google Adwords Pic Example http://i15.photobucket.com/albums/a371/techboyjk/site%20project/googlead_header.jpg Search Box example http://i15.photobucket.com/albums/a371/techboyjk/site%20project/searchbox.jpg Desired layout after changes (minus searchbox) http://i15.photobucket.com/albums/a371/techboyjk/site%20project/details_layout.jpg Changes 1. The search bar at the very top needs to be better aligned next to the logo. You can see, in the "ideal" mockup that I have provided, how the search bar is more closely aligned to the logo and doesn't push down the navigation bar so much. 2. Google Adwords Div - In the "ideal" mockup, you can see how I superimposed a Google Adword div block on the right side. The bottom, right hand side of the Div has an "ads by google" tab that needs to be flush against the navigation bar, so that it looks seamlessly connected. 3. Color Pallette - Once the CSS/design is brought up to spec, I will then create alternate color schemes that users can select. Right below the google Adword div, I want to have a color swatch that users can click to reload the CSS using differen colors. However, for this work, all I need is for the color swatches to be correctly aligned. I can turn them into the links that I need to make the changes. 4. Drop Down's. While I haven't decided what I want each menu to have, I would like to have a drop down menu system created for the navigation bar. A sample system that I can edit in the future would be just fine. Set it up so that when hovering over the "home" menu item, a drop down with three items appears, link 1, link 2, link 3. I can take it from there. 5. Search Box - The search box I have is functional, but I would like a nicer looking, more functional search box if possible. I don't have a lot of money, but if you think you can do any of the work above, send me a price. My feeling is, if you really know what you are doing, these should be easy fixes. Please let me know if you can help in any way. I'm trying to get some simple css formatting to work and it works the way I want but not in explorer, it won't show my color/border/image anything attributes until I literally highlight the content via the mouse. And not always. Of course, it works fine in firefox and the css validates so.....please glance over it and see if you can find any errors. thanks! here's the url http://www.emotika.com/testing/test.htm here's the source 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=iso-8859-1"><title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
}
.arrows{
margin: 0px 0px 2px 5px;
}
.headingrule{
margin-right: 3em;
margin-left: 1em;
background-image: url(images/gradient.jpg);
background-repeat: repeat-x;
}
#maincontent{
margin-top: 1em;
margin-bottom: 1em;
margin-right: 200px;
}
.maincontentbox{
background-color: #F0F0F0;
border: 1px solid #CCCCCC;
margin-left: 3em;
margin-right: 3em;
margin-top: 1em;
margin-bottom: 1em;
padding: 4px 8px;
}
#rightcontent{
position: absolute;
width: 200px;
top: 1em;
right: 0px;
padding: 5px;
border: 1px solid #CCCCCC;
}
#footer{
background-color: #F0F0F0;
clear: both;
}
#wrapper {
position: relative;
width: 100%;
margin: 0px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="maincontent">
<div class="headingrule">
<img class="arrows" src="images/arrows.gif">
WELCOME...
</div>
<div class="maincontentbox">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eros purus, suscipit porttitor,
dictum vel, congue id, eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nam dolor sapien, luctus ut, sollicitudin in, interdum in, mauris. Donec tempor.
Vivamus non dolor. Nam mollis, sem et ornare sollicitudin, felis eros imperdiet velit, et sollicitudin
metus arcu et lectus.
</p>
</div>
<div class="headingrule">
<img class="arrows" src="images/arrows.gif">
WEEKLY SPECIALS...
</div>
<div class="maincontentbox">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eros purus, suscipit porttitor,
dictum vel, congue id, eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nam dolor sapien, luctus ut, sollicitudin in, interdum in, mauris. Donec tempor.
Vivamus non dolor. Nam mollis, sem et ornare sollicitudin, felis eros imperdiet velit, et sollicitudin
metus arcu et lectus.
</p>
</div>
<!--End Main Content Div-->
</div>
<!-- Absolutely Positioned Right Div {{ Removed from Document Flow }} -->
<div id="rightcontent">
CONTACT INFO
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
</ul>
<p> </p>
</div>
<!-- Footer Div Stretches Total Width -->
<div id="footer">
here's the footer
</div>
<!--End Wrapper Div -->
</div>
</body></html>
Good Day, I am trying to figure out why my CSS Rollover images are not showing up in FireFox, but do in IE. Below are links to my pages and CSS, and if anyone can give me some suggestions, ideas I would be very grateful!!! Brook http://www.karmaimports.net/centercss.htm http://www.karmaimports.net/cssrollover.css what is should look like: http://www.karmaimports.net/center.htm http://invalidheart.org/test/about.html i can't get my black 1px border to show on the left and right side of my menu in IE, i can't put border-left 1px solid, etc. because they are blocks and it adds them in between too and messes it up.. it works in firefox but no ie, any ideas? I'm pretty new to website design. I have a lot of programming experience (C++, Java, Python) but very little HTML/CSS experience. I'm learning Django right now and am having trouble with my presentation. I'm hoping someone here can help me. I'm not sure how many here know Django so I'll try and skip over as much of that as I can. I have a somewhat cookie-cutter CSS stylesheet I'm using so I can learn the environment. Below are snippets of my .html files and .css file. base.html Code:
<body>
<div id="header">
<div id="title">
<div id="innertitle">
{% block header %}{% endblock %}
</div>
</div>
</div>
index.html Code:
{% block header %}
<h1>Signal Auctions</h1>
{% endblock %}
main.css Code:
#header {
margin:0 auto;
}
#title {
padding:20px 20px;
margin:0 auto;
background:#333 url('images/titlebg.png') repeat-x scroll 50% 50%;
}
#innertitle {
width:90%;
margin:0 auto;
}
h1 {
font-size:3em;
padding-left:10px;
}
The problem is that I can't seem to get the image images/titlebg.png to display. I don't think it's an issue with pathing - I have other images in the same location that do display and I use the same method to call them. Any thoughts? ok there is this trick that i saw that you can get a div to "act" as an iframe, by that i mean have it with a scroll bar and all but not call the info from a diff page like an iframe, anyone know what im talking about? How can I fix to have scroll bar in IE? It does have scrollbar in FF. It's mostly the main div. Any help? CSS Code: Original - CSS Code div#logo { position: absolute; top: 10pt; left: 20pt; width: 150pt; height: 150pt; /*border-width: medium; border: blue 4px dashed;*/ } div#news { font-family: verdana, arial, helvetica, sans-serif; font-size:10pt; position: absolute; top: 160pt; left: 20pt; width:150pt; height: 200pt; /*border-width: medium; border: red 4px dashed;*/ } div#main { font-family: verdana, arial, helvetica, sans-serif; font-size:10pt; position: absolute; top: 160pt; left: 180pt; width: 500pt; /*border-width: medium; border: green 4px dashed;*/ } /* navigation BEGIN */ div#topBar { font-family: verdana, arial, helvetica, sans-serif; font-size:10pt; position: absolute; top: 10pt; left: 180pt; width:500pt; height: 150pt; /*border-width: medium; border: magenta 4px dashed;*/ } @media screen { div#topBar { position: fixed; } * html { overflow-y: hidden; } * html body { font-family: verdana, arial, helvetica, sans-serif; overflow-y: auto; height: 95%; padding: 0 0.05em 0 0.1em; /* top right bottom left*/ } * html div#topBar { position: absolute; } } /* navigation END */
|
|||||||