|
CSS - Newbie - Is Css Supposed To Render Differntly On Different Servers
I have a dev server Fedora 7 LAMP setup. I have a simple css tag for font size 1.2em. It looks fine. When I push it up to production (unknown server) at GO Daddy the font is HUGE.
I am sure the code is the same. If I view it in Firebug all looks well. There are also a couple of other strange things like margins being off a couple of pixels here and there. My question is do different versions of Linux or maybe Apache cause CSS to render differently? Similar Tutorials$(".navigation-1 a:first-child").addClass("removeBorder"); } What I have is code like: <ul class="navigation-1"> <li><a href=""></a></li> <li><a href=""></a></li> </ul> and I want to add the class removeBorder to the first a element of this ul.. Code:
<style type="text/css">
<!--
.inside {
background-color: #CC9;
border: thin solid #000;
margin: 20px;
float: left;
clear: left;
vertical-align: middle;
text-align: left;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.tit {
background-color: #FC0;
clear: both;
float: left;
width: auto;
margin-top: -10px;
border: thin solid #000;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding-right: 2px;
padding-left: 2px;
}
.lab {
text-align: right;
}
-->
</style>
<head>
</head>
<html>
<body>
<div class="inside">
<div class="tit">
Size
</div>
<br />
<table>
<tr>
<td class="lab">Width:</td><td><input name="pxWidth" type="text" value="250" size="6" /></td>
</tr>
<tr>
<td class="lab">Height:</td><td><input name="pxHeight" type="text" value="80" size="6" /></td>
</tr>
</table>
</div>
</body>
</html>
Could someone tell me why does this piece of code doesn't render the same way in IE as it does in Firefox. In Firefox everything is fine... I think it has something to do with the margin property of the .inside class [Edit] Sorry about the sloppy post. I actually resolved the issue. It had to do with the way IE understands divs. Thanks you for your reply Hi everyone, I'm experiencing an unusual problem that I could use some help with. I've a layout that uses three background images (in separate divs) - a top bg, a bottom bg, and an overall bg. The bottom and overall background images are causing a problem. The top bg and bottom bg are supposed to line up. And they do! My layout looked fine on my computer (PC using Firefox 3.5.7 and IE8). I uploaded it to my personal website - and it looked fine there also. I validated the code successfully. The problem happened when I uploaded it to my client's web server. The top bg displayed ok. However, the overall and bottom background images did not display correctly. They seemed "squeezed". The overall should be center and extend to both ends of the browser window (the image is large enough). I can't seem to identify why it would do this. I even did a test by removing all of the code except for the div containing the background image. I added another div and placed the image directly into it (so that I could compare the size). Here's the css: Code: html, body {
margin: 0;
padding: 0;
background-color: #CCC;
}
#botDrop {
/* margin: auto;
*/ background: url('../images/bgDropBot.jpg') no-repeat left top;
/* width: 971px;
height: 50px;
*/ background-color: #CCC;
}
Again, looked fine on my computer, looked fine on my web server - displayed incorrectly on the client's server. On the client's server it again displayed (horizontally) smaller than it's actual size. My background image was initially about 1200 pixels wide. I reduced it, and that seemed to make it a little better, but didn't quite fix the issue. I suspect there's some sort of calculation going on depending on the screen size. However, I don't get why it doesn't do that for me when I view it locally or on my personal web server. Here's a screenshot showing the problem: http://www.stephencamper.com/screenshot/screenshot.jpg I just want the background image to display at it's actual size. Any help's appreciated. Thanks. -Stephen Hi all, Wanted to put this to some experienced devs and just ask, why is IE8 screwing my floats!? :'( So sad.. Here's my file: Code: <html><head> <style media="screen" type="text/css"> body { margin:0; padding:0; border:0; background:#535353; font-family:"Cambria"; text-shadow: 0px 2px 1px #3b3b3b; } #masterwrap { width:100%; } #wrap { margin:2%; border:2px solid #3b3b3b; } h1 { color:#8c8c8c; font-size:2.3em; text-decoration: underline; } h2 { color:#8c8c8c; padding:0; margin:6; } h5 { margin:80; font-size:8em; color:#ffb142; text-shadow: 0px 2px 1px #3b3b3b; } #header { text-align:center; border-bottom:2px solid #3b3b3b; width:100%; height:80px; } #nav{ clear:both; text-align:center; width:100%; height:50px; border-bottom:2px solid #3b3b3b; } #left { float:left; width:50%; border-bottom:2px solid #3b3b3b; } #right { float:left; width:50%; border-bottom:2px solid #3b3b3b; } #fat { clear:both; width:100%; text-align:center; border-bottom:2px solid #3b3b3b; } #bottom { clear:both; text-align:center; width:100%; height:150px; border-bottom:2px solid #3b3b3b; } #footer { clear:both; text-align:center; width:100%; height:50px; } </style> </head> <body> <div id="masterwrap"> <div id="wrap"> <div id="header"><h1>header</h1></div> <div id="nav"><h2>nav</h2></div> <div id="left"><h2>left</h2></div> <div id="right"><h2>right</h2></div> <div id="fat"><h5>fat</h5></div> <div id="bottom"><h2>bottom</h2></div> <div id="footer"><h2>footer</h2></div> </div> </div> </body> </html>
just copy paste into a html to view. http://www.santeecooperobgyn.com/obgyn I have just begun to design a website and already I have run into bizarre (to me) behavior. In the horizontal navigation bar, when you run your mouse over it, you can see that the inline element is bigger than the block element container because the background color changes, revealing a small 2px or so size difference. Here is the relevant CSS. Code:
* { padding: 0px; margin: 0px; }
#navbar {
list-style-type: none;
margin-left: 0px;
background-color: #336633;
padding: 0em;
height: 2em;
margin: 0px;
font-size: 10pt;
}
#navbar li {
display: inline;
float: left;
padding: 0.5em;
}
#navbar li a {
color: white;
text-decoration: none;
text-transform: uppercase;
padding-left: 10px;
padding-right: 10px;
padding-top: 0.5em;
padding-bottom: 0.5em;
vertical-align: baseline;
line-height: 100%;
}
#navbar li a:hover {
background-color: #669966;
I have no idea why this happens, unless the inline element content height is actually determined by factors other than the line-height. It seems like the total height should sum to 2em in both cases. Hi Guys, we're having some problems with common versions of IE (some versions work, some doesn't). In other browsers site works perfect. Link 1 Link 2 (forum) Screenshot Problem is, that IE stops rendering page at some point (half of the page). It just shows blank white space. We don't have any ideas what and why that happens. I think problem is somewhere in CSS file. Link to CSS file Where could be the problem? p.s. Refreshing site doesn't help, but changing IE window size (or setting to full screen mode), helps even without refreshing. Then page just loads. Ive been at this for almost 6 days, searched the realm for help, googled, IRC'd, worked side by side with templates - even a 2 column setup and for some reason it can't render in IE. Also looked at the Tan hack, whitespace hacks.. Would you be so kind to tell me what I can do to make this work in IE? You can find the CSS by clicking Valid CSS, and html as you know- source. Thanks dearly Site http://dailyblogdose.com Above the image there is a bunch of links to the different pages, well on Firefox when you hover on them, there is a border-bottom underline. On IE7 however it disappears. I could get them back by adding display:block; to #pages ul li a:hover however it makes them look slightly elevated. Any other ways? Newb Disclaimer: I know a little about CSS, but I'm just now making the conversion over from tables. The answer may be obvious, but I still can't see it. I have a list that I'm trying to get to render correctly between browsers. I keep running into the same problem. First of all, the link is: frontlinescreative.com/aljc2/indexCSS.html In the top right column I've got a list of three menu items, with subnavigation underneath. When you hover over the list item, the colors change, and all is well with the world. This works cross-browser. My problem is positioning. In Firefox and IE the list is flush against the blue box at left. In Safari and Opera it's about 30 some-odd pixels shifted to the right. Any ideas on where I've gone wrong? I'm trying to create a block quote like in the image below: http://www.norrislakevillas.com/images/block-quote-sample.png The quotation marks sit in the bottom right corner of a 50 X 45 px transparent PNG image with 10px of spacing on the top and left. The element is rendering correctly with the exception of the background image, it just won't show up. CSS Code: Code:
#block_quote{
float:left;
width:400px;
background:#f7f7f7;
background-image:url(images/quote-top.png) left top no-repeat;
margin:50px 0 100px 53px;
border:1px solid #ccc;
}
#block_quote p{
font:italic 14px segoe ui, arial, sans-serif;
color:#5f5f5f;
line-height:1.4em;
margin:0;
padding:20px 15px 20px 60px;
}
Any ideas why the image isn't rendering? Thanks I am sooooo annoyed with this! I have designed all of my pages with the same template however 2 of my pages seem to be roughly 10 pixels wider even though they all have a width of 940 pixels. www . toolboxstrategies . com/test/brauer Pages: Home, Communities & The Brauer Way are perfect but pages Our Region and Contact seem to be slightly wider than the rest.. How can that be when my header, body and footer all have a width of 940px? Tried to fix this for HOURS but I can't figure out what is causing it! Thank you!!!!!! Hi folks Hoping a CSS expert out there might be able to assist. I am relatively new to css and have produced a site with fluid css to render on windows and mac at 800x600 and 1024x768. The site looks fine in IE (5.5, 6 & 7), Firefox & Navigator. In Opera, it is fine at 800x600, but does not render properly at 1024x768 Also, I have tested the site with browsershots and it doesn't appear to render properly on mac / safari. I am guessing it is something to do with #text ? Do I need to clear: or something like that? If you can help, I would be grateful. Thanks in advance Sol www. waihekemagicmassage.com And: /magic.css 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>Untitled Document</title> </head> <body> <div style="background-color: red;"><input type="radio" id="radio"></div> </body> </html> Viewing this simple test page in a broswer shows that IE and Mozilla both vertically align the radio button differently within its "box" as well as giving it a different number of pixels of padding and/or margin on all 4 sides. Are there any tricks to getting consistency? Hi All, Developed a weird issue in FF and IE8 and am not sure what to do with it. I have some tables that will just not display correct, the table is rendering a little too small and making the text overflow the cells. Its really odd and not sure what to do about it? I took a screen shot in IE, but the have happens in FF. Anyone any ides? I'm a design student trying to make an online portfolio and honestly I don't know much about CSS and I've hit a bit of a snag. I've been goofing around in Dreamweaver trying to get the CSS containers to do what I want but I just can't seem to get it. URL Basically, I'd like a two columns both aligned at the bottom of the browser. The right column would be centered and the left column would be aligned to the left of it. The left column would be a menu column and would be fixed and shouldn't scroll. Here's the CSS code: Please don't laugh Code: .container { height: 80%; width: 700px; margin-left: auto; margin-right: auto; background-color:#06F; padding: 10px; position: relative; overflow: visible; bottom: 0pc; } .menu { height: 80%; width: 300px; padding-top: 25px; padding-right: 25px; position: fixed; left: auto; bottom: 0px; background-color: #F00; }
Sorry for being such a newbie, the code is nothing like what I wanted. If someone could please lend me a hand, I would gladly appreciate it Hello, i am creating a website in dreamweaver and have created a custom css navigation bar online. can anyone help me get the navigation bar on to my dreamweaver website? i have the css files and everything for the navigation bar i just can't work out how to insert it into my design. please help as i have a deadline looming :/ thanks for your time sam marriott Hi, I want to display some products on a web page. Anyone know how I can display the products (image & text) in a nice looking box? Thanks CF Hey folks, I have a question. I'm trying to get a site 100% CSS compliant through W3C. But I'm facing a few problems. Of course I had the site looking just the way I like it (but then had to change stuff to make it compliant and thats when the fun begins!). I was wondering if you could have a look and see why this panel isn't floating to the right like I have told it to! three60design.com/sky_site/home.htm This is my first full CSS website and want it to be just perfect for going for jobs and would REALLY REALLY appreciate any help..... Gerry |
|||||||