|
CSS - Firefox/ie Compatibility Issues
sean.dynahosting.net/wordpress
^if you open this in firefox, It is almost exactly how I want, but when you open it in ie, all sorts of troubles arise. Most importantly, the meat of the page (everything except the header and footer) are not centered, and are not 60% of the page, like this: .basic{ font-family: courier new,courier,monotype; font-size: 11px; width: 60%; margin-left: 20%; } says. How much more simply can I put it? Is there anything I can do to fix this, or if not, is there anyway to get browser specific with css? Similar TutorialsI posted a temp URL for a site he http://www.welcome-home-interiors.net/index2.php I'm having three issues, and I hope someone can help out with one (or all): If you're resolution is higher than 1024x768 resolution, the site appears fine, but if you're at 1024x768 or lower, the page does not scroll. Another issue is that in IE6 & 7 the navigation tabs work fine, but in Firefox all you see is the "HOME" tab (no other ones). The final issue is that in IE6 the main content's text is right up against the main content's picture, but in IE7 & Firefox THAT issue is fine. Here is a link to the CSS file that I'm using: http://www.welcome-home-interiors.n...udes/styles.css Thanks so much for any help that can be offered!... Hello, newbie he I'm helping a friend redesign his website, and I'm having a few problems regarding the look across different browsers. I'm kinda new to CSS, so any help would be awesome! http://www.manplusrocks.com/MAVIN/template.html http://www.manplusrocks.com/MAVIN/css/mavin.css The site looks just fine on IE 6.0 (except for a little gap that the Javascript leaves on the top image), and other browsers seem to be ignoring certain DIV tags. I don't know if they are ID'd incorrectly or if it's another issue... Any comments would be greatly appreciated, thanks! Hi All, It's been quite some time since I've posted in this forum! I have a couple of mixed issues that I was hoping for some brain power on: All question pertain to minor (or large) problems with the following website: Bertelsen.ca There is a gap between the top of my content div and the header (literally #header and #content), I cannot, for the life of me, figure out what is causing it. Even tricks like "* {margin:0px, padding:0px;}" aren't working. It's probably some ridiculous block level element that pushes something else down or applies padding in a manner that it shouldn't. In IE the bullets for my lists at the very bottom do not show up. If anyone can think of what's causing this I'd love to hear about it. Cheers, BEB I'm working on a site and am getting some margin errors in the header. It all is aligned in Chrome, FF, IE8, Safari on Windows, etc... but IE7 or earlier and Safari on mac is not aligning the margins properly. the part that is messed up is what is labeled as desc2 in the header section. It won't left (or even right) align. In the problem browsers, it sends the text off to the center of the header. it would make much more sense if I could show you, but apparently I'm not allowed to post links. anyone have any suggestions? Here is the code section i'm working with: <code>/***** Header ********************/ #header { margin: 0 auto 0; padding: 0; height: 42px; } #desc2 { color: #000000; font-size: 18px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; float: right; margin: 0 290px 10px 0; } #header .wrap { width: 840px; height: 10px; margin: 0 auto 0; } </code> Hello there, My CSS File is being a little problematic with a web page I'm making. Basically I'm using the CSS File to create the Div tags and both Internet Explorer and Firefox seem to be fine in positioning the div tags but for some reason firefox wants to ignore all border commands, so none of my div tags have borders in firefox where as Internet Explorer and other browsers seem to be fine with the code. div.three{ width:700px; height:200px; top:600px; left:50%; margin-left:-350px; position:absolute; border:#00CCCC outset thin; padding-left:5px; } That's all the CSS. If anyone has a solution as to why firefox doesn't like borders anymore that would be great. All i've found so far is that inset/ outset problem, nothing on dissapearing borders. my goodness what a popular site this seems to be. im just a n00b in css and xhtml right now, but hopefully not for long. im trying to use a table to arrange the images in my website introduction page. im trying to make the page look exactly the same no matter the browser window size. im trying to float the two images that have the names programmingimg.gif and programmingtext.gif, but they are not floating to the right, they are just staying adjacent to the other image in the same cell. one other problem that i am having is, that the only way for me to stretch the background gif across the window size it to fake a background. its just the first image in the file with a z index of -1. this works in FIREFOX but not in IE. in IE, nothing can be seen except the background image. does anyone have a solution to either of these 2 problems? css: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Patrick Allard's Very Graphic Website</title> <link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> <img src="backgroundfire2.gif" alt="background image" id="bg" /> <table border="1" class="introlayout"> <tr> <td class="introtitle"> <img src="titlemaxfontgreyredfire.gif" alt="background image" id="titleimg" /> </td> </tr> <tr> <td class="skillpics"> <img src="analogskillspic.jpg" alt="background image" id="analogskillsimg" /> <img src="programmingpic.jpg" alt="background image" id="programmingimg" /> </td> </tr> <td class="skilltext"> <img src="analogskillsmaxfontblackbluefire.gif" alt="background image" id="analogskillstext" /> <img src="programmingmaxfontblackbluefire.gif" alt="background image" id="programmingtext" /> </td> </tr> <td class="menu"> <img src="mainmenumaxfontblackbluefire.gif" alt="background image" id="mainmenuimg" /> </td> </tr> </table> </body> </html> html: Code:
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
img#bg
{
position:fixed;
width:100%;
height:100%;
z-index:-1;
}
img#titleimg
{
width:100%;
}
img#mainmenuimg
{
text-align:center;
width:30%;
}
img#analogskillsimg
{
width:40%;
height:60%;
}
img#programmingimg
{
float:right
vertical-align:bottom;
width:40%;
height:60%;
}
img#analogskillstext
{
vertical-align:bottom;
width:40%;
}
img#programmingtext
{
float:right
width:40%;
}
table.introlayout
{
width:100%;
height:100%;
}
td.introtitle
{
width:100%;
height:10%;
}
td.skillpics
{
vertical-align:bottom;
width:100%;
height:70%;
}
td.skilltext
{
vertical-align:top;
width:100%;
height:10%;
}
td.menu
{
text-align:center;
width:100%;
height:10%;
}
Hi CSS gurus, I am a bit stuck with the presentation issues I currently have with my website, http://www.tophatweddings.co.uk. Compare the site layout in IE (6 not 7) and look at it in Firefox. In Firefox you'll notice the borders and backgrounds are not displaying correctly. This is what I want to fix. Has anyone got any suggestions for how I can adjust my CSS to make it display properly in Firefox? Please help I have a div in my header that contains an image. The height of the image is 82px. For some reason in firefox (and chrome too) if I don't set the div height to 125px it gets cut off. It looks OK in IE6 without the height set, but with it set as needed for firefox it then creates a space in IE. My header file has: Code:
<div id= "logo" ><img src = "images/logo_LWV.gif"></div>
<div id = "topNav">
<div id = "topNavMenu">
<a class = "top" href="index.php">Home</a>
<a class = "top" href="about.php">About Us</a>
<a class = "top" href="join.php">Join</a>
<a class = "top" href="funds.php">Special Funds</a>
<a class = "top" href="contact.php">Contact</a>
</div> <!-- end topNavMenu -->
</div> <!-- end topNav -->
</div> <!-- end topBar -->
<div id = "imagebar"><img src = "images/lwvCorvallis.jpg"></div>
<div id = "greenbar">
<div id = "pagetitle">
<p>Title</p>
</div><!-- end pagetitle -->
</div> <!-- end greebar -->
and the css is: Code: #topbar
{
dispaly:block; width: 800px;
}
#logo
{
float:left;
}
#topNav
{
float:right;
width: 612px;
height: 65px;
background-color:#cc0033;
}
#topNavMenu
{
position:relative; top:40px;
text-align:left;
color: white;
}
#imagebar
{
display:block;
width: 800px; height:125px;
}
#greenbar
{
display:block;
width: 800px; height: 90px;
background: url(images/greenbar.jpg); background-repeat: no-repeat;
z-index: 0;
}
#pagetitle
{
position:relative; left: 200px;top:25px;
width: 600px;
color: white;
z-index: 1;
}
The site is he http://www.lwv.corvallis.or.us/ What's going on? First Issue In this site the Left Navigation top and bottom spacing is somewhat off. First head over to this page: http://www.pricedigital.com/ejs//ad...weight-loss.htm In firefox the navigation ends up being a tad too low, but the way it looks in ie6 and ie7 is how I want it to look in firefox. Any suggestions? This all takes place in sidebar1 Next Issue How do I center an image using just css? Final Issue In IE6 the floated right photos on a few of these pages do not show up correctly. Here is one for example: http://www.pricedigital.com/ejs//ad...lds-pallant.htm How can I go about fixing this? Screw it. Why do the margin-top values on these layers DO NOTHING in firefox, but act as expected in IE? Which way is actually correct? Also, if I add a float:left to the blue layer, firefox adds a margin-top to the blue and green layers only? This seems very wrong.. How can I get the expected margin-top on each layer? Code: <BODY style="background-color:yellow;"> <div id='blue' style="width:250px; height:250px; display:block; margin-left:1px; margin-top:10px; background-color:blue; position:relative;"> <div id='green' style='width:220px; height:200px; margin-top:10px; background-color:green; display:block; position:relative;'> <!--- prod selector box ---> <div id='gray' style='width:200px; height:150px; overflow:auto; margin-top:10px; margin-left:4px; display:block; background-color:gray; position:relative;'> asdf </div> </div> </div> </BODY> http://www.beckin.com http://www.bestdropshipper.net I just recently updated my firefox to the most available version. This firefox version absolutely sux. I don't know why all these browsers have to keep causing trouble for designers. You will notice that my css style for Beckin Designs no longer works. Code: <style type="text/css">
@font-face {
font-family: English;
font-weight: normal;
src: url(fonts/English_.ttf);
}
</style>
If you view this site in other browsers or the firefox version previous to the latest release you will notice it displays fine. However, not in the new firefox. Next, the best dropshipper menu doesn't display correctly either. How can I go about fixing these issues? Do I need to do some time of if statement. Please let me know exactly how to address these issues. Thanks!! The problem I have has arisen whilst trying to create a horizontal and a vertical navigation menu using <li> tags. It is best illustrated by the following example: Code: <div style="width:100%;height:50px;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> <br /> <div style="width:100px;height:100%;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> and the CSS Code:
div {
border:0;
background-color:#888888;
}
ul {
margin:0;padding:0;
}
ul li {
float:left;
list-style:none;
background-color:#CCCCCC;
height:50px;
width:100px;
}
The <div> tags are set to 50px height and 100px width respectively. When an <li> element is placed within the div with the same height or width they display the way I intended. However once a 1px border is applied to the <li>'s then in IE the border is counted as part of the width or height. In Firefox the border will add 2px to the starting height and width giving the effect of width:102px or height:52px;. This is massively frustrating as I need each <li> to have the 1px border. It looks different in each browser (I have not tested it in netscape nor opera, but I suspect they will display the same as Firefox.) Can anyone provide a fix to get get round this please? Thank you in advance. Hello, I am trying to make the table cells in the chart (URL below) at the bottom of the page to be invisible. I have styled the border & background color to #FFFFF (white). When viewed in Firefox, cell borders in gray appear. http://oharenoise.org/2010_news_releases-2.htm It displays fine in firefox, but not in IE. I haven't done anything personally with websites since php was first coming out, so css is completely new to me and Im using a (now modified) template instead of from scratch. So any help would be great. WARNING: Linked site is not work-safe Site is at 'razornow.comlu.com' css code is: Code:
body {
font-family: tahoma, helvetica, arial, sans-serif;
font-size: 10px;
text-align: center;
background: #000000;
margin: 0px;
padding: 10px;
}
html, #wrapper, h1 {
margin: 0px;
padding: 0px;
}
img { border: 0px; }
#wrapper {
margin: auto;
text-align: left;
width: 710px;
position: relative;
}
h1, h2, h3 {
font-size: 10px;
}
h1 {
line-height: 1;
position: absolute;
top: 0px;
left: 0px;
}
h2 {
margin: 0px 0px 5px 0px;
padding: 0px;
}
h3 {
padding: 4px 0px 0px 0px;
}
.block {
display: block;
}
.clear {
clear: both;
height: 10px;
}
.left {
float: left;
margin: 5px 20px 0px 0px;
}
.right {
float: right;
margin: 0px 0px 0px 20px;
}
.readmore {
text-align: right;
}
/* page structure */
#wrapper {
background: url(images/body_t.gif) top no-repeat;
padding-top: 20px;
}
#body {
background: url(images/body_bg.gif) repeat-y;
padding-bottom: 10px;
}
#body p {
background: white;
}
#nav {
position: absolute;
top: 25px;
left: 253px;
width: 450px;
height:35px;
background: url(images/nav.gif) repeat-x;
}
#nav ul{
padding: 0px;
margin: 0px;
list-style-type: square;
list-style-position: inside;
}
#nav li{
padding: 7px 16px 0px 16px;
margin: 0px;
height:35px;
list-style-type: square;
list-style-position: inside;
float:left;
border-right: 1px solid #FFFFFF;
display:inline;
}
.lastchild{border-right: 0px none #FFFFFF !important;}
#nav a{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: capitalize;
color: #FFFFFF;
text-decoration: none;
}
#nav a:hover{
color:#fcff85;
}
#current {
float: left;
width: 235px;
margin-left: 10px;
margin-top: -10px;
background: url(images/menu_bg.gif) repeat-y;
border-bottom: 1px solid #05256b;
}
* html #current {
margin-left: 5px;
}
#content {
float: right;
width: 450px;
padding-top: 40px;
margin-right: 8px;
}
* html #content {
margin-right: 4px;
}
#footer {
background: url(images/body_b.gif) no-repeat;
text-align: center;
padding-right: 10px;
padding-left: 480px;
padding-bottom: 30px;
}
#copyright {
position: relative;
top: -8px;
color: #989898;
}
/* current column */
#current .nav {
margin: 21px 6px 5px 5px;
}
#current ul {
border: 1px solid #8497c2;
margin: 0px;
padding: 0px;
}
* html #current ul {
padding: 3px 0px;
padd\ing: 0px;
}
#current li {
list-style: none;
border: 1px solid #4e698f;
background: #01285f url(images/harry.gif) left center no-repeat;
padding: 0px 0px 0px 20px;
margin: 3px;
}
#current li.readmore {
text-align: right;
background-image: none;
}
#current ul a {
color: #beddff;
text-decoration: none;
display: block;
padding: 3px 12px 3px 0px;
}
* html #current ul a {
width: 100%;
w\idth: auto;
}
#current ul a:hover {
color: white;
}
#current .readmore {
padding: 3px 4px 4px 20px;
}
* html #current .readmore {
padding: 0px 4px 1px 20px;
padd\ing: 3px 4px 4px 20px;
}
#current .readmore a {
text-decoration: underline;
display: inline;
}
#currenttitle {
position: absolute;
left: 15px;
top: 409px;
}
* html #currenttitle {
top: 411px;
}
/* page content */
#content h2 {
line-height: 1;
margin: 0px;
padding: 20px 0px 0px 0px;
}
#content h3 {
margin: 10px 0px;
padding: 0px;
text-transform: capitalize;
}
#content p {
margin: 10px 0px;
padding: 0px;
}
#content .contentbox {
border: 1px solid #e1e1e1;
border-top: none;
padding: 5px 20px 10px 20px;
}
* html #content .contentbox {
padding-bottom: 11px;
}
#content, #content a {
color: #868686;
}
#content a:hover {
color: #000;
}
My special font displays correctly in all browsers except the new firefox. It even worked in the older firefox before the new update. I am not sure why this is happening or how to fix it. Here is the code in the html page: Code: <head>
<style type="text/css">
@font-face {
font-family: English;
font-weight: normal;
src: url(fonts/English_.ttf);
}
</style>
</head>
<div class="content">
<h1> Beckin Designs</h1>
Here is the CSS rules in my external CSS sheet: Code: .content h1 {
font-family: "English", sans-serif;
font-size: 52px;
font-style: normal;
/* [disabled]text-transform: uppercase; */
color: #F7F7F7;
text-decoration: none;
width: 930px;
text-align: center;
margin: -10px 0 5px 0;
padding: 0;
}
Thanks! |
|||||||