|
CSS - Simple Top Bar Too Tall In Ie
I'm just trying to run an 8-pixel high blue bar across the top of my pages. Looks fine in Safari and Firefox. But appears to be 20+ pixels high in IE. Any ideas? Here's my CSS file. See #header. Thank you for your help!
Code: * { font-style: normal; font-weight: normal; text-decoration: none; text-align: left; text-indent: 0; margin: 0; padding: 0 }
body { color: #333; font-size: 1em; font-family: "Myriad Pro", "Myriad Web", "Lucida Grande", "Trebuchet MS", Tahoma, Helvetica, Arial, sans-serif; line-height: 1.5; background: #fff url("../images/back_scrabble_tiles.jpg") no-repeat left 9px; padding-right: 0; padding-bottom: 30px; padding-left: 0 }
a { text-decoration: underline }
a:link { color: #369 }
h1 { font-size: 2.4em; letter-spacing: -0.05em; margin-top: 10px; margin-bottom: 20px }
h2 { font-size: 1.8em; margin-top: 20px; margin-bottom: 20px }
h3 { font-size: 1.2em; margin-top: 20px; margin-bottom: 20px }
#header { background-color: #276da3; height: 8px; border-bottom: 1px solid #fff }
#content { margin-top: 44px; position: relative; overflow: hidden }
#maincontent { margin-right: 48px; margin-left: 450px }
#maincontent h1 { font-size: 2.4em }
#maincontent h3 { color: #276da3 }
#maincontent b { font-weight: bold }
#maincontent i { font-style: italic }
#maincontent ul { padding: 20px }
#maincontent #photo { float: right }
#contactform { line-height: 1.2 }
#sidebar { width: 404px; float: left }
#sidebar #logo { padding-top: 240px; padding-bottom: 32px; padding-left: 32px }
#sidebar #navigation { margin: 10px 0; padding: 0; width: 400px }
#sidebar #navigation ul { list-style: none }
#sidebar #navigation li a { color: #949576; font-size: 1.2em; font-weight: bold; text-decoration: none; background: #fff; text-align: right; display: block; padding: 8px 10px; height: 20px; border-bottom: 1px solid #e5e7cd }
#sidebar #navigation li a:hover { color: #797a58; background-color: #ebecdd }
#footer { margin: 24px 8% 12px 36%; padding: 12px 0; clear: both }
#footer * { font-size: 0.9em; text-align: center }
Similar TutorialsGreetings, I'm trying to implement a pseudo-modal dialog by layering the following: A div containing an iframe to be loaded with a form page A semi-transparent div to cover the entire underlying page, to prevent clicks on other elements The problem is that the cover div is only as tall as the viewport, which means that any page content in the scroll area below the viewport is left exposed. Below is the source. Any suggestions would be most appreciated! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=iso-8859-1">
<title>Test</title>
<style type="TEXT/CSS">
html,body {
margin:0;
padding:0;
height:100%;
}
#contactDiv{
z-index:2;
display:none;
position:absolute;
top:100px;
left: 50%;
margin-left:-300px;
border-style:solid;
height:450px;
width:600px;
background-color:#ffffff;
border-color:#666666;
border-width:10px;
}
#modalOverlay{
z-index:1;
display:none;
position:absolute;
top:0px;
left: 50%;
width:1008px;
margin-left:-505px;
min-height:100%;
background-color:#000000;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
</style>
</head>
<body>
<a onclick=
"javascript:document.getElementById('modalOverlay').style.display='block';
document.getElementById('contactDiv').style.display='block';">
SHOW IT</a>
<p>
<div id=contactDiv>
<iframe id=contactIframe width=600 height=450 scrolling="no"
frameborder=0></iframe>
</div>
<div id=modalOverlay>
</div>
testing testing testing testing testing testing testing testing
(The word "testing" was actually repeated multiple times --
enough to force scrolling on my laptop. I edited it for (relative)
brevity.)
</body>
</html>
This is a simplified version of the actual page. There's a menubar with a link that populates the div with the actual contact form. I cut out everything that didn't relate to the problem. Thanks, DM Hello, I have a container div with an id of "outer". This container holds 3 column divs, leftcolumn, rightcolumn and centercolumn. The container CSS looks like this: Code: #outer{
padding:0px;
margin-left:auto;
margin-right:auto;
width:755px;
background-color:#FFFFFF;
height:100%;
z-index:1;
background-image: url(images/common/whitebox.gif);
background-repeat:repeat-y;
}
But for some reason, the container doesn't extend down to the length of the inner divs. Each column will vary in the future because everything is pulled from a database. Yet you can see the issue he http://www.caillouette.com/FriendsPHP2/index.php Any help, tips or tricks are appreciated. Thanks I've never used one line of CSS every before tonight. I'm learning how to use HTML and CSS Properly and the CSS thing is completly new to me. The book gives an example: Code: <HTML>
<HEAD>
<TITLE>StarBuxx Coffee</TITLE>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</STYLE>
</HEAD>
<BODY>
<H1>StarBuxx Coffee Beverages</H1>
<H2>House Blend, $1.49</H2>
<P>A smooth, mild blend of coffees from Mexico, Bolivia, and Guatemala.</P>
<H2>Mocha Cafe Latte, $2.35</H2>
<P>Expresso, steamed milk and chocolate syrup.</P>
<H2>Cappuccino, $1.89</H2>
<P>A mixture of espresso, steamed milk and foam</P>
<H2>Chai Tea, $1.85</H2>
<P>A spicy drink made with black tea, spices, milk and HHUUHHHHNAY!</P>
</BODY>
</HTML>
In The picture in the book, it shows a 1px border around the entire Content, but when I open it up in IE I don't see the border around the content. Why is this? Is the book out-dated? Also, Did anybody know Gray and Grey are both the same thing? g-r-a-y is simply an American derivation of the original spelling g-r-e-y. Gray is a color. Grey is a *colour* So say I want to put a DIV over top and image, and say that DIV happens to be about 30px wide and 10px tall. I can easily do it with: <img src="image.gif" height="100" width="100"><div style="position:relative; top: -10px; left: -30px; z-index:5; display:inline">text</div> But doing so always creates a bit of space to the right of the image, as if the DIV were there, and not at it's new spot. Basically, it creates an extra space after the image that messes everything up for me. (This isn't caused because the DIV is actually larger than 30px. It's not. And I can move it much further to the left on the image.) How do I get a div over an image without getting that extra space after the image? I suppose I could have a div that contains both the image and the layered div, then position them absolutely inside it? Is this the best solution? *** EDIT: YOU CAN SEE AN EXAMPLE HE *** http://www.poweredpages.com/sample.php Thanks. *** UPDATE. Got the space to leave after placing it as absolute inside a relative DIV. Now I have vertical alignment discrepancies between IE and Firefox. There has to be an easier way! *** Im really new to this so please forgive the stupid questions. I have a logo div and I want to output a bit of PHP to the right of the logo. I put my code right after the header div and it places the output under the image, not to the right. Here is my code: Code: <h1 id="logo"><a href="<?php echo $this->getUrl('') ?>"></a></h1>
<img src="cart.jpg" alt="Cart" />
<?php $_cartQty = $this->getSummaryCount() ?>
<?php if ($_cartQty>0): ?>
<?php echo $this->__('There are <a href="%s"><strong>%s items</strong></a> in your cart.', $this->getUrl('checkout/cart'), $_cartQty) ?>
<?php echo $this->__('Cart Subtotal:') ?> <strong><?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?></strong>
<?php if ($_subtotalInclTax = $this->getSubtotalInclTax()): ?>
<br />(<strong><?php echo Mage::helper('checkout')->formatPrice($_subtotalInclTax) ?></strong> <?php echo Mage::helper('tax')->getIncExcText(true) ?>)
<?php endif ?>
<?php endif; ?>
<?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?>
<div class="actions">
<button class="form-button" type="button" onclick="setLocation('<?php echo $this->getCheckoutUrl() ?>')">
<span><?php echo $this->__('Checkout') ?></span>
</button>
</div>
<?php endif ?>
<?php $_items = $this->getRecentItems() ?>
<?php if(count($_items)): ?>
<?php echo $this->__('Recently added item(s)') ?>
<?php foreach($_items as $_item): ?>
<?php echo $this->getItemHtml($_item) ?>
<?php endforeach; ?>
<script type="text/javascript">decorateList('cart-sidebar', 'non-recursive')</script>
<?php else: ?>
<?php echo $this->__('You have no items in your shopping cart.') ?>
<?php endif ?>
Red is the code im trying to position. Attached is an image showing at the top what it is currently, and then at the bottom what im trying to achieve. Is the best way to do this to create a seperate DIV with float right or something along those lines? I have a Class "fieldnameback" which is intended to provide the background to cells in a table containing field names.. the CSS code is: .TC width: auto; height: 36px; background-image: url("/e107_themes/grey33/images/p22_box_02-TC.png"); margin: 0 5px; .TL height: 36px; background-image: url("/e107_themes/grey33/images/p22_box_02-TL.png"); .TR height: 36px; background-image: url("/e107_themes/grey33/images/p22_box_02-TR.png"); What I cannot resolve is why the background produces a series of narrow bands which resemble my required background as opposed to continuous backgrounds for each cell. I am not yet allowed to post URL's so if anyone needs to see the problem please contact me direct. Can anyone help me please? Regards I have no clue what the heck is going on here! I'm just making a simple layout and all of a sudden the wrapper div is scooting down in FF and Chrome. It looks fine in IE...what the heck is going on? lol. I haven't had this type of problem since I first started CSS. I bet I'm missing something simple. http://mcculloughdesigns.com/sdm/mi...on/template.php Oddly enough, if you apply the class "btest" (just creates a 1px border) to the wrapper div, it displays properly in the problem browsers. I'm looking for an easy to use WYSIWYG editor that works in CSS. In my admin (back end) panel right now, I'm set up with a regular editor that works with tables and I want to switch that out for a CSS editor. Two things to consider here....I have no CSS experience so I'm hoping that there's something out there that's as easy to use as TinyMCE which is what I have currently. The other point to consider is that I have no dynamic content on these pages. They are just simple and straight forward. Can anyone recommend something? Thanks! Thanks in advance! Fairly straightforward problem: I'm creating a header and I have a blank div to the left of the header that I have the width set to 10%, because i want to position the content depending on the browser size, but when I make the browser window too small the content to the right of the blank div moves underneath the blank div. Anyway to set the content as fixed and just have the user scroll if the browser is too small? Thanks! Ohh.. and both divs the "blankDiv" and "header" are floated left... Code: #blankDiv{ width:10%; background-image:url("../images/header_tile.png"); background-repeat:repeat-x; height:224px; float:left; } #header{ float:left; }
I'm having this CSS problem with a div not doing it's width to 100% like im telling it to.. Basically I have this problem: img386.imageshack.us/img386/1795/ddddye5.png As you can see by the picture, I need the side content box to resize and go 100% to the bottom where my footer is. I CANT have this being a fixed height because that's not what I'm looking for. Anyway, here's my CSS: Quote: #maincontentleft { float : left; width : 252px; height: 100%; background-image : url("images/sidecontentbg.gif"); } #sidecontentbg { background-image : url("images/sidecontentbg.gif"); padding-left : 15px; padding-right : 15px; height: 100%; background-color: red; } #sidecontenttop { background-image : url("images/sidecontenttop.gif"); } #footer { padding-top: 5px; padding-bottom: 5px; background-color : #ebebeb; height : 35px; border : 1px solid #dbdbdb; text-align : center; } The entire side bar thing i'm making is in a div which CSS id is "maincontentleft" and then I have the actual side content box inside that with id's "sidecontenttop" and "sidecontentbg " where "sidecontentbg " is the repeating background that is supposed to go all the way to the bottom. Hello Everyone, I have created a site that was started as one large graphic. I used CSS, a fixed width 3 column layout, and the site is breaking in IE6 and IE7. It is rendering fine on the PC in Netscape 6, 7 and 8; Opera 9.10 and Firefox 2.0.0.4 and on the Mac in Netscape 7.2, Safari 2.0.4, Firefox 2.0.0.2 and Opera 9.10. My simple question is this: is there any way to get this site to render properly in IE 6 (btw, when I upgraded to IE7, in the About IE7 dialog it says IE6...) without having to use hacks? Is it my code even though everything validates? Or is it IE?? I would rather not use hacks and have been thinking about sending IE users to a page asking them to download another browser because I really don't want to create another site just for IE users and I don't know where to begin with the hacks. It just seems strange to me that the browser that most people use in the country doesn't render a validated site correctly... Any comments will be helpful. Thank you! Jen Address of site: www.berkleecitymusicnetwork.org Hi, I see something like this, span.small { font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #666666; } <span class="small"> my question is why they put the word span. Why not do .small { font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #666666; } <span class="small"> I have looked on countless web pages for help with positioning a image using CSS. I have a logo that I want to appear in the middle of the page regardless of what sized browser the person is using so basically ro replace the <center> tag. I know all about aboslute positioning etc but this means it will not ajust with the size of the browser. Can anyone help me to just position an image in the middle of a page using purely CSS? Thanks Hi really nw to using css just starting out today lol. So i was wondering how i can get the two divs mod1 and mod2 to sit side by side and expand the advBar div height when more and more content gets added to both divs, rather than me specifying a height and floating the two divs inside the advbar div ? any ideas would be great. unless ive lost yas. Code:
<body>
<div id="level0">
<div id="level1">
<div id="topBar">This is the top navigation bar.</div>
<div id="advBar">
<div id="mod1">2323 frwef sdf</div>
<div id="mod2">s dfs dfsd fsd fsd f</div>
</div>
</div>
</div>
</body>
Code:
body {
margin:0px 0px 0 0px;
padding:0;
background:#FFF;
}
#level0 {
background:#FC0;
}
#level1 {
padding-left:9px;
padding-right:9px;
margin-left:300px;
margin-right:300px;
background:#FFF;
}
#main {
background:#CCC;
}
#topBar {
padding: 10px;
background:#FC0;
}
#advBar {
padding: 10px;
height: 90px;
background:#FFF3AC;
}
#mod1 {
border: 1px solid red;
float: left;
padding: 10px;
background:#FFF3AC;
width: 45%;
}
#mod2 {
border: 1px solid red;
float: right;
padding: 10px;
background:#FFF3AC;
width: 45%;
}
I never usually code my layouts and test for validation (which after this I see they would fail horribly), even though it displays right theres so many mistakes. I finally got my layout to pass validation in HTML 4.1, but some things went wrong. First heres the links: (and yes this does involve CSS): http://65.26.50.204/ec/index.php - My Layout (View Source) http://65.26.50.204/ec/stylesheet.css - The CSS One thing I was told to do is take out height="100%" but it only told me to take it out in some places and not otheres... strange. Anyways how do I get it to stretch 100% with CSS? Second question, is it a bad practice to use a lot of css classes, I mean like if I have a CSS class used only once is that bad? Does it even matter how many I use?... it wont delay page loading time will it? Third question, I was told to remove the cellspacing tag in most of the places, is that not used anymore or what? I am learning CSS and started to like it I was trying to make an image gallery so was just playing around with this link I got Please see this click here When I added five more images in this, the last images ceases to display How can I correct that I was testing this by adding this code 5 times <li> <a href="#nogo"> William Turner<br /> (1775-1851) <span> <img src="../img/turner.jpg" alt="painting" title="painting" /> This English painter was one of the greatest romantic interpreters of nature in the history of Western art and is still unrivaled in the virtuosity of his painting of light. </span> </a> </li> I was anticipating that a scrollbar would come automatically in the browser but that dint happen What should I do? San Hello ;> Basicly I'm trying to make several <p>s, that are situated 1 under the other. Each of them must hold 1 image that is on the LEFT side, so the text of the <p> will be on the right side of the image. [image] text <p> <img /> </p> thats how i did it. However when i put float: left, to the image as to fix it the IMG from the <p> below the 1st <p> overlaps the other so i tried and made a <div> between the <p>s with clear:both The problem with that is that IE leaves space between the <p>s while FF and Opera doesn't. Any way to fix that? Or a more correct way to do it ? Thanks! Hi, I am trying to center my page wrapper. It centers in FF, but not IE. I just cannot see what is wrong. This is my CSS: PHP Code: body{ margin: 0 auto; } #wrapper{ width: 900px; margin: 0 auto; } Any ideas? I think that this is something really basic but I just haven't been able to put my finger on the problem. Can someone please point me in the right direction? In IE 6 the cell background (as defined in CSS) or the table cell size is not correct, but it looks fine in FF. The test page is: http://www.kdays.com/box/kerrin.htm |
|||||||