|
CSS - Firefox...weird Css Rendering
All I am trying to do is pad some text so that it is aligned vertically, but whenever I pad the text, in Firefox, it forces the parent div up, instead of the text down, which makes no sense
Code:
body { margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif }
#logoimage { margin: 5px 0px 2px 5px }
#version { font-size: 10px;
font-weight: bold;
margin: 4px 5px;
text-align: center;
position: absolute;
top: 20px;
right: 15px }
#header { background-color: #D2E1FA;
height: 20px;
position: relative }
#navigation { font-size: 11px;
position: absolute;
top: 2px;
left: 20px }
#userinfo { background-color: #FFFFFF;
height: 13px;
width: 150px;
color: #000000;
font-size: 10px;
margin: 4px 5px;
text-align: center;
position: absolute;
top: 0px;
right: 150px }
Actual html is here... Code: <img id="logoimage" src="/images/logosmall.gif"> <div id="version"> Beta Build 1000 </div> <div id="header"> <div id="navigation"> Test My Account </div> <div id="userinfo"> <b>Guest User</b> > Log In </div> </div> It actually pushes the div almost until it overlaps the image above, which makes no sense... How should I be applying the padding instead? thanks in advance! Similar TutorialsHi I am completely stumped by this. My CSS is not rendering in FF, I am running FF on a mac. Two pages, they are nearly the same, but show one display Css and the other does not - No CSS and With CSS I have been going crazy trying to find out what is wrong. The CSS link is here Thanks Jake one of my client's pages is not rendering my external css in mozilla firefox. the page's index is: (URL address blocked: See forum rules) It is in a frameset... the simplest page on my site is (URL address blocked: See forum rules)/leftspacer.html. I cannot get the stylesheet to put the background image in proper alignment. PLEASE HELP! here is a html page with iframe (index.html): Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>iframe</title>
<style type="text/css">
#framebox{
width:200px;height:150px;
border-style:solid;border-color:#000;border-width:1px;
}
</style>
</head>
<body>
<div>
<iframe id="framebox" name="framebox" src="iframe.html" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</div>
</body>
</html>
and this is a iframe page(iframe.html): Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#text{
background-color:#00f;
border-style:dotted;border-color:#f00;border-width:1px;
}
</style>
</head>
<body>
<div id="text">sample text sample text sample text sample text</div>
</body>
</html>
run this example. the text inside #text(the div inside iframe page) is intentionally written with and iframe is given specific width and height to make iframe scroll. What happens in firefox(in opera too) is that #text div does not strech to fill entire text string but instead has width equal to width of iframe and the text kind of overflowing the div. But in ie #text div is expanding to include entire text string. IMHO is that in this specific case ie seems to be right... well, i know that ie wrongly expands containers dimentions if content is too big BUT not in this case... #text div DOES NOT have any stated dimentions so that means that i want it to adopt for whatever dimensions the content has... What do you think? hello. i'm using a CSS tutorial and DREAMWEAVER to build a website. i find that the site is interpreted the way i would like it in either Firefox or Safari...but not in IE. When links are hovered over while using IE, the page distorts. has anyone experienced this type of problem before? thank you in advance for your time and assistance! i did post several explanatory screenshots to illustrate the problem. replace each "@" with a period. mea culpa. www@wwpea@net/screenshots@htm Hey folks, here's an odd problem that's got me totally stumped. I've got a nine item unordered list, each of which is a link that contains both text and a background image. The background image is a large spritebox. I'm using background-position to shift the spritebox to display the sprite specific to the a:link and also to display a separate a:hover version. Looks great in Safari and CSSEdit, but in Firefox four of the links are misplaced and the sprite is incorrect. The hover state is correct, however. This is hard to explain, but the example should help illustrate the problem. My thought was that it was related the psuedo class of a:link, but nothing I've tried seems to help. Any thoughts? The example file contains both the HTML and the CSS (just to simplify this problem for this forum). The full background image and the file containing the sprites is at my website, artmeetsearth dot org slash 2011 slash codetest dot html. To get the image type socialmediaicons.jpg instead of codetest. Thanks for any help you can offer! hey all, i'm having a really strange issue with firefox users on windows. basically, my site is simple. i've got navigation on the left, and a content table on the right. it's all done with CSS. firefox users on windows have been complaining that sometimes (not all the time) the content window has been loading half way. it's beendoing this on numerous PCs with firefox, and i can't figure it out. sometimes it loads the whole content box, sometimes it stops half way. it's fine all the time in IE on both platforms, and firefox on a mac. here is the code i'm using for the content boxes: #content_table { FONT-FAMILY: Verdana, Helvetica; width: 60%; margin: 0 auto; border: 1px solid #999; overflow: hidden; } #content_table h2 { FONT-FAMILY: Verdana, Helvetica; margin: 0; -moz-opacity: 1; font-size: 15px; text-align: left; padding: 2px 0 2px 15px; font-weight: bold; background: #000 url(../../../../images2/title.png) repeat-x; color: #fff; border: 1px solid #000 } #content_table p { font-size: 12px; FONT-FAMILY: Verdana, Helvetica; -moz-opacity: 1; padding: 5px; background: #333333; color: #FFF; margin: 1px } if you're on a PC, check it out: link thanks! As you can see, the image that says view all clients has a blue border on top and to the left also. There are no borders set for this image so I am not sure why its there. It does not show up on safari, just firefox. (I am not sure about IE since I am on a mac). Here is the code: .view_all_projects{ width:245px; height:63px; position:absolute; overflow:hidden; margin: 550px 0 0px 0; } And here is the html: <div class="view_all_projects"><a href="http://www.bestdropshipper.net/order.html"><img src="images/more_project.gif" alt="Best Dropshipper"/></a> </div> This image is also clickable. Any ideas why the strange blue border? hey, i have a page that includes several flash files.. since its a translation company i have made a page in Russian but the upper flash menu refuses to appear in firefox but displays in internet explorer.. other flash files appear.. and i don't know if its related but in order to make the Russian appear correctly i had to save the php page as utf-8 with no BOM... appreciate any help since i am clueless as to this weird problem here is the page address : bit.ly/4SqdNw sorry new in the forums could not link it but copy and pase Hi fowks, Normally I'm able to solve CSS issues relatively easily, well with some experimentation at least. However, this one has really got me stumped. Basically, I'm developing a menu for a weblication which is based on the famous Suckerfish menus. Everything works ok in IE and Mozilla when in an Left-to-Right (LTR) environment, but it doesn't work quite so well when the direction is flipped to RTL. IE copes fine, but FF doesn't. The menu works itself, but the viewport doubles in size and scrolls off to the right, even though there are no elements there. Anyone got an idea as to what could be doing this? I've included the relevant files for you to trial. Thanks for having a look. Hope you can help. It's driving me nuts. Cheers, John Hey CSS experts, I have a weird problem with CSS in Firefox and Netscape. I am using CSS to manage my fonts using the the div class and span class strings. However, I've noticed that Firefox and Netscape insert additional spaces between some text areas. This happens when I define things both as a div class and as a span class. What makes this increasingly weird is that I can have two nearly identical lines of code and one will display extra spaces and one will not. Case in point: These are two exaple lines of code: <tr> <td><div class="navtext">130 South Main Street</div></td> </tr> and <tr> <td><div class="navtext">Saturday - 10 a.m. to 1 p.m.</div></td> </tr> The first line doesn't end up with spaces between it, but the second line doesn't. I chose these example because only a couple lines of code seperate them. I am an extreme CSS newbie and would greatly appreciate any help with this problem. Thank you in advance! Jordan Coffey P.S. Here is a link to the site so that you can see it for yourself: www.countrysidetrvl.com Hey everyone, I am just touching up an old design I made, and I just noticed that Firefox has a weird white-space next to the top menu. Not sure what is causing it, but it is there. Here is a screenshot of what is happening in Firefox. Also, in IE, the container doesn't extend past the bottom menu. Here is a screenshot of what is happening in IE. So far I am just testing in Firefox 2.0.0.11 and IE7. Here is my code: html4strict Code: Original - html4strict 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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title></title> <style type="text/css">/* <![CDATA[ */ * { padding: 0; margin: 0; } body { background-color: #6AB2DA; color: #000000; text-align: center; font-size: 13px; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; /* Thank you, Kravvitz */ } a { color: #6AB2DA; } a:focus { outline: 0 none; } #container { margin: 0 auto; text-align: justify; width: 50%; } #page { background-color: #FFFFFF; } #header { background-image: url( http://img443.imageshack.us/img443/8114/bg1bp4.jpg ); background-position: bottom left; height: 120px; width: 100%; } #header span { padding-left: 150px; padding-top: 50px; font-size: 21px; font-weight: bold; letter-spacing: -0.1em; color: #666666; display: block; } #menu { background-color: #6DC3DE; width: 100%; } #menu li { float: left; padding-top: 10px; padding-bottom: 11px; list-style-type: none; } #menu a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; } #news { clear: both; margin-top: 34px; overflow: auto; padding: 15px; height: 100px; border-bottom: 1px solid #0AA; } #news h1 { color: #6DC3DE; font-size: 21px; } #content { margin-top: 15px; padding: 15px; } #content h2 { padding-top: 10px; float: left; color: #6DC3DE; padding-right: 25px; font-size: 31px; border-right: 3px solid #6DC3DE; } #content .info { padding-top: 10px; padding-left: 25px; float: left; font-size: 11px; height: 31px; } #content p { text-indent: 45px; clear: both; border-bottom: 1px dotted #6DC3DE; padding-top: 10px; padding-bottom: 10px; } #bottom { border-top: 1px solid #6DC3DE; margin-top: 10px; padding: 5px; } #bottom ul#one { float: left; } #bottom ul#two { float: right; } #bottom li { padding-top: 10px; padding-bottom: 11px; list-style-type: none; display: block; } #bottom a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; display: block; width: 250px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* ]]> */ </style> </head> <body> <div id="container"> <div id="page"> <div id="header"><span>i.love.summer</span></div> <div id="menu"> <ul> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> </ul> </div> <div id="news"> <h1>welcome</h1> Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. </div> <div id="content"> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> </div> <div id="bottom"> <ul id="one"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> <ul id="two"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Any suggestions would be great. Hello, I am using ASP.NET to create a web application. I HAVE to use a master page which means that I do not have complete control over the rendering. The trick is, the master page defines a menu at the top of the page. I need to create a table that dynamically fills the contents of the REMAINDER of the screen. If there is any overflow, I want to scroll the contents. Does anyone know how I can have the table fill the REMAINDER of the screen? I can nest DIVs and such once I have that outer table. Thank you! Crystal Hi guys, pretty new to CSS layout, and recently created a site for my girlfriend. I used 960 grid system to handle my layout css, and it renders perfectly in safari/FF/IE7+... after I installed IE Tester, i realized that IE6 wasnt rendering properly. The menu and z-index stuff arent appearing correctly. If anyone can have a quick look and let me know where my code is causing issues it would be a great help. I'm not allowed to post the URL, as im a new user, but I guess I can send through PM if you want to have a look? Thanks a bunch. Greetings everyone! I've been working on the following page for a couple of days now, and it looks fine in Safari and Firefox, but all my CSS fail in IE. I don't know what the problem is. Feel free to view the page at the following url http://www.netunification.com/demo/ I spoke with a friend and he speculates IE is having problems with the float command. I'm not so sure of this because I used the same CSS techniques while building the following site (http://www.the904.com/demo/). The904 page renders perfectly in IE and I can't figure out what the difference is between the pages. I thought I used the same concept with both pages. I've been trouble shooting the problem for a couple of days now, but I haven't had any luck. Can please someone take a look at my net u page (http://www.netunification.com/demo/) and suggest a solution Thanks in advance for any/all assistance. Your time and effort is greatly appreciated! Walt http://codymays.net/~private_ftp/theed When viewing this page in IE6, I see the background of the content div rendered below the footer. The second you select all, click on another window and click back, or minimize the maximize the window, it goes away. Is this a problem with my code or a bug in IE (because it works in IE7). Either way, what should I do to go about fixing it? when i dont turn of cache in IE my website seems to forget some css rules half of the time its really annoying cause i only see it when i browse the site on the server not local...and only when caching is turned on i use the equal heights columns technique from positioniseverything.net the site having the problem is here the problem is visible on the home page....i think around 1/5th of the clicks... then the link in the top left content box that should be absolute; bottom:0; just crawls up to the text.... like my question is WHY?? does it only do it sometimes First of all I just updated my Dreamweaver from 2004 MX to CS4. I have not used CSS before. I now want to update my sites to XHTML 1.0 Transitional and thought I would start using CSS. I am having trouble with the text losing or changing color and size once it gets posted. It looks fine in browser preview. So first some general questions. What is the difference between assigning properties to heading or class? Do I or should I use both the heading and class on a bit of text? Do I attach the style sheet to the template or to just the pages? All my pages are made from one template. I have several books, that tell how to create style sheets, but not what to do with this problem! Thanks, Jill Hi guys, I am in the process of refreshing my site however cannot seem to figure out a specific iOS rendering issue. On iOS devices (I have tested on an iPad and a iPhone 4), the menu on my website displays on the first visit, but then disappears. I cannot reproduce this on a regular desktop browser, but can reproduce the rendering issue on the iOS simulator. The CSS file is located here and the corresponding validator result link is here. This is what it looks like on first visit: And this is what happens when I refresh the page: I'm really at a loss to understand where I might be going wrong, and would be grateful for any assistance. The CSS rules for the menu specifically a Code:
/* !Navigation */
#menu {background: #393 url(../images/menu.png) no-repeat !important; width: 744px; height: 40px; position: relative; margin: 170px 0 0 0; padding: 0;}
#menu li {float: left;}
#menu li a, #help li a {position: absolute; margin: 0; padding: 0; display: block; text-indent: -9999px; overflow: hidden;}
#menu li a {height: 40px;}
/* Normal State */
li#home a {left: 0; width: 79px;}
li#about a {left: 84px; width: 75px;}
li#journal a {left: 164px; width: 89px;}
li#origami a {left: 258px; width: 97px;}
li#stuff a {left: 360px; width: 65px;}
li#links a {left: 430px; width: 65px;}
li#contact a {left: 500px; width: 93px;}
/* Hover & Current State */
li#home a:hover, #snkhan_home li#home a {background: url(../images/menu.png) 0 -40px;}
li#about a:hover, #snkhan_about li#about a {background: url(../images/menu.png) -84px -40px;}
li#journal a:hover, #snkhan_journal li#journal a {background: url(../images/menu.png) -164px -40px;}
li#origami a:hover, #snkhan_origami li#origami a {background: url(../images/menu.png) -258px -40px;}
li#stuff a:hover,#snkhan_stuff li#stuff a {background: url(../images/menu.png) -360px -40px;}
li#links a:hover, #snkhan_links li#links a {background: url(../images/menu.png) -430px -40px;}
li#contact a:hover, #snkhan_contact li#contact a {background: url(../images/menu.png) -500px -40px;}
Any suggestions welcome! Saj Ive noticed this is only a problem in IE6(and probably some more older browsers)...Firefox 3 and IE 7 it works fine. Visit this site: (you will have to do it twice because you need to login first.) http://ronnieswietek.com/flashden/newsletter/newsletter.php?do=preview&id=2 u: admin p: testadmin I put a blue background on the div so you can understand what I am talking about. If you look at it in firefox, the blue covers the whole newsletter, text and images, but if you look at it in IE, it only does a small portion of it...Can anyone figure out this mystery??? CSS for that section: Code:
#newsletter_subject
{
padding: 5px;
font-size: 18px;
color: #ffffff;
background-color:#999999;
}
#newsletter_preview
{
overflow: auto;
background-color:#000066;
}
#recipients
{
padding: 5px;
font-size: 18px;
color: #ffffff;
background-color:#999999;
}
and then the corresponding html: Code: <div id="newsletter_subject">flashden newsletter!</div> <br> <div id="newsletter_preview"><font size="6"><span style="font-weight: bold; color: rgb(153, 255, 153); font-family: georgia;">flashden <span style="text-decoration: line-through;">is</span> <span style="color: rgb(204, 0, 0); background-color: rgb(0, 0, 0);">awesome</span> <span style="font-family: impact; font-style: italic; text-decoration: underline; color: rgb(153, 255, 0); background-color: rgb(0, 51, 204);">I</span>!</span></font><br> <br> <img style="width: 202px; height: 261px;" alt="" src="http://flashden.net/new/site_flashden.net/interface/logo_top.gif" align="left"><br> </div> <br> <div id="recipients">This Newsletter WILL be sent to the following users:</div> etc..... |
|||||||