|
CSS - Is Blogger Ignoring My Css? (ie)
For the life of me, I can't figure out what is causing this problem.
One of my sites (www.whyilovechicago.com) has a blog that I host on Blogger. I customized the blog layout to look exactly like the rest of the site, going as far as to call all of the CSS and images from my hosted domain. I have an unordered list displayed inline across the top of the content. In Firefox, both the blog and the website look fine. However in IE, the website looks fine BUT the blog displays the navigation links on separate lines. If the CSS is the same (I'm calling the same file), WTF is going on here? I'd appreciate if someone could take a look and see if I'm missing something... Similar TutorialsHello. I'll preface this by saying that it's probably a common problem with a simple solution, but I've searched all over the net for a solution and come up empty. It's very possible that I'm using the wrong search terms, however. Anyway, on to the issue I'm having. I recently rebuilt a page using CSS with divs -- prior to that it had been using several nested tables and the code was getting pretty unwieldy -- and it looks great in most of the latest browsers. Except, of course, IE. The way the page is set up, I have two container divs floated left, each one using 48% of the available width, with a 1% margin on each side. It looks perfect in every browser except for IE. In IE it seems that the only style definition that it cares to acknowledge is the float left, so both container divs get forced together on the left side with no space in between. It's not unreadable, but it's not what i want either. Here's the style definition: Code: .newsTypeSection{
width:48%;
float:left;
margin-right:1%;
margin-left:1%;
display: inline;
}
the display:inline; was something i added later as it seemed to be a proposed fix from another site. It didn't make a difference that I could see, so I just left it. Here's an image that shows the difference. The top example is what it should look like. It looks perfect in every browser but IE. URL The bottom is what shows up in IE8, and probably other version of IE as well. Can anyone help me with this? It's beyond frustrating. Please let me know if you need more information. I can't link to the page because it's not public at the moment. this never happens in IE, only FF sometimes when i visit my site the letter links in the menu are messed up. like the padding is ignored on only 1 of the letters when they ALL use the exact same code. heres what i'm talking about: what it should look like: what it sometimes looks like: as you can see, the padding on 1 letter is ignored. sometimes this alternates between different letters, but its always only 1 letter that this happens to. here is my css code: Code:
#menubarbg {
background: url(images/menu_bar_bg.gif) repeat-x;
}
#menuletter a {
background: url(images/menu_letter_bg_noh.gif) repeat-x;
font-weight: bold;
display: block;
text-align: center;
color: #ffffff;
text-decoration: none;
line-height: 20px;
cursor: pointer;
}
#menuletter a div {
background: url(images/menu_letter_l_noh.gif) left top no-repeat;
}
#menuletter a div div {
background: url(images/menu_letter_r_noh.gif) right top no-repeat;
padding: 0px 6px 0px 6px;
height: 20px;
}
#menuletter a:hover {
background: url(images/menu_letter_bg_h.gif) repeat-x;
color: #000000;
}
#menuletter a:hover div {
background: url(images/menu_letter_l_h.gif) left top no-repeat;
}
#menuletter a:hover div div {
background: url(images/menu_letter_r_h.gif) right top no-repeat;
}
here is the html code: Code: <table cellpadding="0" cellspacing="0" border="0"> <tr> <td id="menuletter"><a href="guitar-tabs/1.html"><div><div>#</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/a.html"><div><div>A</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/b.html"><div><div>B</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/c.html"><div><div>C</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/d.html"><div><div>D</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/e.html"><div><div>E</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/f.html"><div><div>F</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/g.html"><div><div>G</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/h.html"><div><div>H</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/i.html"><div><div>I</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/j.html"><div><div>J</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/k.html"><div><div>K</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/l.html"><div><div>L</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/m.html"><div><div>M</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/n.html"><div><div>N</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/o.html"><div><div>O</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/p.html"><div><div>P</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/q.html"><div><div>Q</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/r.html"><div><div>R</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/s.html"><div><div>S</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/t.html"><div><div>T</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/u.html"><div><div>U</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/v.html"><div><div>V</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/w.html"><div><div>W</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/x.html"><div><div>X</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/y.html"><div><div>Y</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/z.html"><div><div>Z</div></div></a></td> </tr> </table> the reason it uses a table is so it displays properly on all browsers. help.... Hello All! I started making a website and I have run into a problem with some code. I am trying to put the paypal donation code on my site with an image, unfortunately the paypal code is ignoring the css and the image is not displaying with a border around it. :P My site: www.looniefrugal.com The image is on the far right column under the RSS image. Note how the RSS has a border and the Coffee image does not. Here is the code for that column Code: <div id="tertCol"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
<?php endif; ?>
<div id="elseWhere">
<h3>Before you go</h3>
<p>I dare you to... </p>
<ul id="imgLinks">
<li><a href="http://feeds2.feedburner.com/LoonieFrugal" title="Subscribe to LoonieFrugal.com"><img src="<?php bloginfo('template_directory'); ?>/images/guide/rss.gif" alt="Subscribe - RSS" /></a></li>
<li>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="elina_1985@hotmail.com">
<input type="hidden" name="lc" value="CA">
<input type="hidden" name="item_name" value="Loonie Frugal">
<input type="hidden" name="item_number" value="Coffee">
<input type="hidden" name="currency_code" value="CAD">
<input type="hidden" name="bn" value="PP-DonationsBF:coffee.gif:NonHosted">
<input type="image" src="<?php bloginfo('template_directory'); ?>/images/guide/coffee.gif" name="submit" alt="Coffee Time!">
</form>
</li>
</div><!-- close #imgLinks -->
</div><!-- close #tertCol -->
And here is the Style code Code: ul#imgLinks{list-style:none;margin:7px 0;}
#imgLinks li{color:#7F7F7F;line-height:1.2em;padding:0 0 1px;}
#imgLinks li a img{border:3px solid #EEE;width:208px;height:69px;color:#333;font-weight:bold;}
#imgLinks li a:hover img{border-color:#DDD;}
Thanks for any help with this. I am new to code :P Please look at this page in IE7 and FF http://ameritech.tmhdesign.com/x.asp The margin-top for the footer div and the h3 margin for this element are ignored... Code:
div#hp_service{
background:transparent url(../images/hp_service_div_bg.jpg) no-repeat;
width:436px;
height:330px;
margin-left:14px;
}
div#hp_service h3{
margin:10px 0 0 10px !important;
font-weight:normal;
}
PS. After making this post I modified the div in question to have the h3 position absolute, and I added a div called .ser, but in FF the layout is all messed up, in IE it is fine. I put a bg color of blue on the div.ser and I see the height is messed up. Why don't the p element expand the height of the parent div? I've build a little nav that seems to work perfectly in IE, but is hated by FireFox. Specifically it seems like firefox is ignoring my margin and padding settings. Can anyone tell me what I'm doing wrong? Thank you. Code: <html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding: 0;}
.NavContainer {
position:relative;
padding:0em;
width: 930px;
height: 27px;
margin:0em;
background-image: url(images/nav/navBg.gif);
background-repeat: no-repeat;
}
.NavLeftPad {
position:relative;
padding:0em;
width: 87px;
height: 27px;
margin:0em;
float:left;
background-image: url(images/nav/spacer.gif);
background-repeat: no-repeat;
}
.NavRightPad {
position:relative;
padding:0em;
width: 87px;
height: 27px;
margin:0em;
float:left;
background-image: url(images/nav/spacer.gif);
background-repeat: no-repeat;
}
.Nav2pxPad {
position:relative;
padding:0em;
width: 2px;
height: 26px;
margin: 1px,0px,0px,0px;
float:left;
background-color:#54636D;
}
.NavLink {
font-size:12px;
color:#FFFFFF;
font-family:arial,helvetica,sans-serif;
text-decoration:none;
font-weight:normal;
line-height: normal;
}
.NavBlock {
position:relative;
padding: 7px,3px,0px,0px;
height:26px;
margin: 1px,0px,0px,0px;
float:left;
background-color:#54636D;
text-align: right;
}
.NavWhatIsDermalounge {width:126px;}
.NavOurTreatments {width:125px;}
.NavOurClinicians {width:115px;}
.NavLocations {width:92px;}
.NavTechnology {width:96px;}
.NavAboutUs {width:94px;}
.NavMakeover {width:96px;}
-->
</style>
<script language="JavaScript">
// On/Over state color #E46804 orange
// Off state color #54636D nav-gray
var theNavState = 'NavWhatIsDermalounge';
apAddLoadEvent(NavInit);
function apAddLoadEvent(aponfunc) {
var apoldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = aponfunc;
} else {
window.onload = function() {
apoldonload();
aponfunc();
}
}
}
function NavInit(){
if (theNavState != '') {
document.getElementById(theNavState).style.backgroundColor = "#E46804";
}
}
function NavRollOver(theElement){
document.getElementById(theElement).style.backgroundColor = "#E46804";
}
function NavRollBack(theElement){
if (theElement != theNavState) {
document.getElementById(theElement).style.backgroundColor = "#54636D";
} else {
document.getElementById(theElement).style.backgroundColor = "#E46804";
}
}
</script>
</head>
<body>
<div id="NavContainer" class="NavContainer">
<div id="NavLeftPad" class="NavLeftPad"></div>
<div id="NavWhatIsDermalounge" class="NavBlock NavWhatIsDermalounge"><a href="what_is.html" onMouseOver="NavRollOver('NavWhatIsDermalounge');" onMouseOut="NavRollBack('NavWhatIsDermalounge');" class="NavLink">What is dermalounge</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavOurTreatments" class="NavBlock NavOurTreatments"><a href="treatments.html" onMouseOver="NavRollOver('NavOurTreatments');" onMouseOut="NavRollBack('NavOurTreatments');" class="NavLink">Our treatments</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavOurClinicians" class="NavBlock NavOurClinicians"><a href="clinicians.html" onMouseOver="NavRollOver('NavOurClinicians');" onMouseOut="NavRollBack('NavOurClinicians');" class="NavLink">Our clinicians</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavLocations" class="NavBlock NavLocations"><a href="locations.html" onMouseOver="NavRollOver('NavLocations');" onMouseOut="NavRollBack('NavLocations');" class="NavLink">Locations</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavTechnology" class="NavBlock NavTechnology"><a href="technology.html" onMouseOver="NavRollOver('NavTechnology');" onMouseOut="NavRollBack('NavTechnology');" class="NavLink">Technology</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavAboutUs" class="NavBlock NavAboutUs"><a href="about.html" onMouseOver="NavRollOver('NavAboutUs');" onMouseOut="NavRollBack('NavAboutUs');" class="NavLink">About us</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavMakeover" class="NavBlock NavMakeover"><a href="makeover.html" onMouseOver="NavRollOver('NavMakeover');" onMouseOut="NavRollBack('NavMakeover');" class="NavLink">Makeover</a></div>
<div id="NavRightPad" class="NavRightPad"></div>
</div>
</body>
</html>
Please look at http://www.rodstrans.com/diagnosis/body_leaks.html In IE & Chrome the checkboxes are positioned absolute in each table cell, but in Firefox they all bunch at the top left. I have put a position:relative on all parent elements and can not figure out what is happening. I have an odd situation where the box for an anchor in a menu is extraordinarily large . . . IN MOZILLA! IE works as expected & displays correctly, but the Mozilla box is triggering the :hover half way in the content area! (See attachment) I'm a little baffled on this box situation, EVEN INCLUDING the box-sizing changes for both IE/Moz (box-sizing: border-box & -moz-box-sizing: border-box), still doesn't resolve the problem. Any feedback is greatly appreciated! Here is the relevant CSS: Code: body, html
{
min-width: 700px;
background: url(/_test/images/nav-filler.gif) repeat-y;
height: 100%;
font: 1.2em Verdana;
line-height: .8em;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
p, a, div
{
font-size: 76%;
padding: 0 10 0 0;
box-sizing: border-box
-moz-box-sizing: border-box;
}
#header
{
position: absolute;
top: 0;
left: 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
z-index: 200;
/*border: 1px solid #0F2B5B;*/
}
#header-right
{
position: absolute;
top: 0;
right: 0;
z-index: 100;
width: 100%;
background: url(/_test/images/header-filler.gif) repeat-x;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#content
{
position: absolute;
top: 154;
left: 163;
z-index: 300;
margin: 0 0 0 0;
padding: 0 10 0 0;
}
#left-nav
{
position: absolute;
top: 154;
left: 0;
right: 163;
margin: 3 0 0 0;
padding: 0 0 0 0;
max-width: 163;
display: block;
}
#nav-links
{
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 133;
}
#left-nav a
{
color: #000000;
font: 69% Verdana;
background: url(/_test/images/nav-item3.gif) no-repeat 0px 0px;
margin: 0 0 0 0;
padding: 0 17 4 29;
width: 155;
text-decoration: none;
display: block;
box-sizing: border-box
-moz-box-sizing: border-box;
}
#left-nav a:hover
{
color: #FF0000;
background: url(/_test/images/nav-item3.gif) no-repeat 0px -50px;
}
#left-nav a:active
{
color: #FF0000;
background: url(/_test/images/nav-item3.gif) no-repeat 0px -100px;
}
#left-navContent
{
color: #000000;
font: 66% Verdana;
width: 163;
background: url(/_test/images/nav-item-filler.gif) repeat-y 0px 0px;
margin: 0 0 0 0;
padding: 0 30 4 29;
text-decoration: none;
}
.nav-itemBottom
{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.nav-header
{
color: #0F2B5B;
font: bold 80% Verdana;
margin: 00 20 0 0;
padding: 7 0 6 32;
width: 163;
text-decoration: none;
display: block;
}
#nav-headerType1
{
color: #0F2B5B;
background: url(/_test/images/nav-header.gif) no-repeat 0px 0px;
}
#nav-headerType2
{
color: #0F2B5B;
background: url(/_test/images/nav-header.gif) no-repeat 0px -30px;
}
#nav-headerType3
{
color: #FF0000;
background: url(/_test/images/nav-header.gif) no-repeat 0px -60px;
}
#nav-headerType4
{
color: #0F2B5B;
background: url(/_test/images/nav-header.gif) no-repeat 0px -90px;
}
#nav-headerType5
{
color: #FF0000;
background: url(/_test/images/nav-header.gif) no-repeat 0px -120px;
}
Help! I've spent WAY too much time on this....you wouldn't believe! I made a sliced image header in Photoshop and put it on my site using Dreamweaver. The home page and the calendar page built in Dreamweaver look fine. However, the other pages are actually a Blogger blog at a subdomain. When I put the header in the blog, it does wonky stuff! It looks worse in IE and Firefox (well, maybe--the last code testing did make IE look better). I know its a CSS problem. I've tried lots of different things and have watched them make changes, but nothing fixes it. I don't want to start all over and have my time be a total waste. I am only self-taught on all this stuff, so I think I need someone more knowledgeable to help me. The site is a www hanoverlutheran.com (I understand it takes 5 posts before I can share links, so that's abbreviated). Oh please! I hope someone has the answer! I spent 12 hours alone on it yesterday and many more today! I'm having trouble getting a layout to look correct in IE (i know same old story) Looks fine is Fire Fox. Here is a link to see what the problem might be Let me know if you need to see the source code. Thanks, Jrock Hey, I am trying to edit a blogger template. What I want to do is make each drop down menu a different background color. SO like one item says 1 (hover) 2 | 3 | 4 (background is red) next to 1 is 5 (hover) 6 | 7 | 8 (background is green). Here is the layout and an example @ www. faketester.blogspot .com Novice at CSS. I have a Blogger website. I'm trying to put a CSS dropdown menu. In Safari, it works fine. Don't have access to Firefox, so I don't know, but in IE (6&7) the dropdowns are hidden behind any other widgets on the page. I've seen plenty of forum posts regarding this issue with flash player, but none specifically addressing IE and Blogger widgets. I've tried adjusting z-index in each li, ul. I'm still really new at this, so I'd appreciate any help and specific guidance you can offer. Website: crossfit-hr.com CSS code (source from CSS MENU MAKER): .menu{ width:945px; border:none; border:0px; margin:0px; padding:0px; font-family:verdana,geneva,arial,helvetica,sans-serif; font-size:12px; font-weight:bold; font-color:#FF0000; z-index:200; } .menu ul{ background:url(removed for thread) top left repeat-x; height:43px; list-style:none; margin:0; padding:0; } .menu li{ float:left; padding:0px 8px 0px 8px; z-index:200; } .menu li a{ color:#000000; display:block; font-weight:bold; line-height:43px; padding:0px 10px; text-align:center; text-decoration:none; } .menu li a:hover{ color:#FF0000; text-decoration:none; } .menu li ul{ background:#e0e0e0; border-left:2px solid #0079b2; border-right:2px solid #0079b2; border-bottom:2px solid #0079b2; display:none; height:auto; filter:alpha(opacity=95); opacity:0.95; position:absolute; width:150px; z-index:10000; /*top:.5em; /*left:0;*/ } .menu li:hover ul{ display:block; } .menu li li { display:block; float:none; padding:0px; width:150px; z-index:200; } .menu li ul a{ display:block; font-size:12px; font-style:normal; padding:0px 8px 0px 8px; text-align:left; } .menu li ul a:hover{ background:#949494; color:#FF0000; opacity:1.0; filter:alpha(opacity=100); } .menu p{ clear:left; z-index:200; } .menu #current{ background:url(removed for thread) top left repeat-x; color:#FFFFFF; } ========================= HTML code for Widget: <div class="menu"> <ul> <li><a id="current" href="(removed for thread)" target="_self" >Home</a> </li> <li><a href="" target="_self" >Methods & Results</a> <ul> <li><a href="(removed for thread)" target="_self">Our Methods</a></li> <li><a href="(removed for thread)" target="_self">See the Results</a></li> </ul> </li> <li><a href="" target="_self" >How to Start</a> <ul> <li><a href="(removed for thread)" target="_self">Starting Options</a></li> <li><a href="(removed for thread)" target="_self">Sign-Up Form</a></li> </ul> </li> <li><a href="" target="_self" >Schedule & Prices</a> <ul> <li><a href="(removed for thread)=dctrh782_10dsmgnqhq" target="_self">Class Schedule</a></li> <li><a href="(removed for thread)" target="_self">Prices</a></li> </ul> </li> <li><a href="(removed for thread)" target="_self" >Coaches</a> </li> <li><a href="" target="_self" >Admin & Media</a> <ul> <li><a href="(removed for thread)" target="_self">Online Payments</a></li> <li><a href="(removed for thread)=0" target="_self">Release Form</a></li> <li><a href="(removed for thread)" target="_self">CFHR Photos</a></li> <li><a href="(removed for thread)" target="_self">CFHR Videos</a></li> </ul> </li> <li><a href="(removed for thread)" target="_self" >Contact</a> </li> </ul> </div> =================== |
|||||||