|
CSS - Firefox Adding
How can this be fixed?
Code:
<table border=5 cellpadding="0" cellspacing="5" bordercolor="#cc66cc" >
<tr>
<td> </td>
<td> </td>
</tr>
</table>
firefox is doing like a bordercolorlight/dark combo out of my bordercolor, but IE is fine.. see ss's. Similar TutorialsHello everyone, I have this issue where Firefox keeps making unwanted spaces between the headers/dividers of my content. My page is located at: hainescityhighschool(dot)com/development/beta (please view in both IE and Firefox to get the idea) I can't post links because of my user status but that should be a valid URL. Anyways, Firefox 3.0 is the version I'm having problems with. I haven't tested it in other versions. Where it says welcome, I want the divider image to be almost directly underneath it, and in IE it works. Only firefox seems to have an issue. Any ideas? Hello all. This is a problem I am encountering on many placing: when I put a width to an certain object (let's say 20px), and I want the text in the object to start and pixel 4px, I can use padding-left:4px; This is no problem in Internet explorer, but Firefox seems to make this object 4px wider. Instead of keeping the object 20 pixels, it becomes 24 pixels. Does anybody know how to get of this bug in Firefox? Hi! I have a problem in Firefox with a layout located at: link removed. Please follow this path: Executive Furniture > Executive Desks > The Haydon Range - and then select a product. Don't open a new tab, refresh the page or resize the text and scroll down. There is a huge gap between the last 'related items' product and the card images. Now if you open a new tab, resize the text or refresh the page, the gap disappears and won't re-appear until you close the window and re-open the site in a new window (start a new session maybe). I have a feeling this has something to do with margins or it may just be a bug - I haven't a clue! The relevant CSS is situated at link removed. The main template layout is shared between the other CSS files in that directory, but they aren't relevant to that part of the layout. I apologise for it not being the most efficient CSS in the world . You'll have to "view source" for the HTML; and this I won't apologise for, because it's being spat out by the crappiest piece of shopping cart software ever. It took me 4 months to get it to validate (originally 850+ errors)! Anyway, if any of you could help me figure out why Firefox is displaying this big margin I would be eternally grateful. Cheers I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. I'm having an issue where a website is showing up a few pixels off in Mac Firefox than it is in PC firefox. Anyone have a quick fix for this? Mac Screenshots: http://graffetto.com/chops/clairus_screens.pdf PC Firefox Screenshot: Firefox, IE, and Netscape all look identical on PC, while firefox, IE and safari look identical on Mac, but different from PC (except safari - messed up text) Any help is greatly appreciated Edit: after reviewing my post I realized I was quite vague. What I'm looking for is a way to filter CSS so that only Mac Firefox users will receive one CSS file, and PC users will receive another. I promise once I become more versed in the mechanical rather than graphical side of web design, I'll start giving back more. But untill then... I have several div's, all absolutly positioned, but I need this one, (see attached picture) it is the bottem right div, that will have several above and several div's above it. I need to know how to do this without absolute positioning. Because with absolute positioning, I would have to manually resize each time I do an update. Thanks, -Sam Does anyone no some really good resources of info for adding css to xml. I have a page with a header, two column, and footer layout. For some reason, IE is adding 5px to the left column of the page. Here is the relevant css code. Code: #container {
width:770px;
margin:0px auto 0px auto;
background:#ffffff;
text-align:left;
}
#header {
position:relative;
width:770px;
height:109px;
background-image:url(images/header.jpg);
background-color:#ffffff;
text-align:center;
}
div#leftcontainer {
float:left;
width:190px;
background-color:#ffffff;
}
div.leftcontent {
width:190px;
background-color:#004994;
padding-left:5px;
padding-right:5px;
}
div#centercontainer {
margin-top:3px;
float:right;
width:570px;
background-color:#ffffff;
padding:0px;
}
div.centercontent {
width:560px;
background-color:#ffffff;
padding-left:5px;
padding-right:5px;
}
#footer {
clear:both;
padding:4px;
width:770px;
font-size:.8em;
font-family:arial, sans-serif, courier;
color:#ffff00;
background-color:#004994;
margin:0px 0px 20px 0px;
}
Now everything goes inside the leftcontent and centercontent classes. It displays perfectly in Firefox but IE is adding 5px on the right side of the leftcontent section which is pushing all the centercontent down. Any ideas what is causing this? I thought I got away from the IE box model bug by using boxes inside boxes. Thanks in advance. I was wondering how I can set a font that others may not have on there computer. I know I can set a font folder for my site but how do I link to that so that if the viewer doesn't have the font so it will still display correctly for them too? What type of font extension should I put in there? Should it be just the .ttf? Are there any special css rules that I must include? Thanks for the help! hi I have a long list of images positioned absolutely, and vertically down the page. However, if I wanted to add a new image to the top of the list... how can I do this without having to change all the positioning values of the other images? cheers nathan I am wondering if it is possible to include a line break within the content area of the :after pseudo element. I would like to create a class that adds text following an image, i.e. .click_for_larger:after { font-size: 0.8em; content:"<br />- Click for larger version -"; } Of course, in this example the "<br />" would be printed. Is there any way to indicate that there should be a line break before the text is displayed? Cheers - george I have been working on a school project and I need to add last column and create another row on the bottom and apply that data to a total using CSS. Here is my xml code Code: <?xml version="1.0" encoding="utf-8"?> <!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> <title>Groceries</title> <!-- This code links my style sheet to my html document. --> <link rel="stylesheet" type"text/css" href="p1b.css" /> </head> <body> <h1>Grocery List</h1> <table border="1"> <tr> <th>Item</td> <th>Manufacturer</td> <th>Size</td> <th>Unit Price</td> <th>Quality</td> <th>Total Price</td> </tr> <tr> <td>Corn Flakes</td> <td>Kelloggs</td> <td>18 oz</td> <td>2.50</td> <td>1</td> <td>2.50</td> </tr> <tr> <td>Solid White Tuna</td> <td>Starkist</td> <td>5 oz</td> <td>2.79</td> <td>2</td> <td>5.58</td> </tr> <tr> <td>Cream of Mushroom Soup</td> <td>Cambell's</td> <td>10.75 oz</td> <td>1.00</td> <td>2</td> <td>2.00</td> </tr> <tr> <td>2% Lowfat Milk</td> <td>Safeway</td> <td>0.5 gal</td> <td>1.99</td> <td>1</td> <td>1.99</td> </tr> <tr> <td>Extra-Wide Egg Noodles</td> <td>Golden Grain</td> <td>12 oz</td> <td>0.87</td> <td>3</td> <td>2.61</td> </tr> </table> </body> </html> and here is my CSS code Code: /* CSS Document p1b */ { background-color:white; } /* this is where I change the lins in the table */ table, th, td { border:0px; border-collapse:collapse; text-align:left; padding:5px } table { padding:10px; border:10px solid #d0d0ff; margin:20px; }
Can anyone help I'm trying to add the total prices column and creating another row that shows Total. I am having what seems like the most elementary problem, yet I cannot figure out what is causing it. I am creating DIVs and nested DIVs to position, contain and format my content. And for some reason, adding padding to a style applied to a given DIV is causing that DIV to expand by the amount of padding added. So for example, if I have a style: Code: #contentBox {
width: 500px;
background-color: blue;
}
And apply it like so: Code: <div id="contentBox">My content goes here</div> It displays as it should: a blue box that is 500px wide. But if I change the style to add padding to the box likee so: Code: #contentBox {
width: 500px;
background-color: blue;
padding: 10px;
}
The blue box is now 520px wide (it added the 10 px of padding on either side to the overall width. I thought that the padding was included in the width of a box so that changing the padding would not change the amount of space occupied by that element. Am I wrong or missing something here? Hi, I have a new template, and a new separate menu; the code has been validated on both. I'm having trouble adding the new menu to the new template, replacing the menu that came with the template. What I would like to do is embed it if possible so when I add content I won't have to change the menu on 400 different pages; also this is a nice menu with lots of code in the html. Is it possible to embed a menu from a root file with a small code? If not how do I add the huge code to my template? I have tried putting it on the top but the drop down doesn't work and parts of it are obscured by the content on my page. If I put the menu about half way down my page it works alright, but I need it on the top. (I tried to post the urls below but the forum rules prevent new members from doing so.) I know this is a lot of info, but I hope you can help me, if so I really appreciate it. Thanks, Dave hello there i am starting my own site pretty soon and i am stuck at the final desgin stage and i tryed everything to edit the .css and add images and so did the guy i hired to install the script the site is koooraup.com as you can see i have 2 blank spaces on both sides what i want to do is the following add about 4 logos at each side like the EPL logo i got all the logos ready but i couldnt figure out how to add them so can some one help please here is the .css contents Quote: body{ background:#48494B; } #mainc{ width: 780px; background-color:#FFFFFF; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; border: 10px solid #FFFFFF; } #header{ margin: 0 auto; width: 780px; background-image:url(/images/h_bg.gif); background-repeat: repeat-x; height: 169px; } #hd_top{ margin: 0 auto; width: 780px; height: 42px; background-image: url(/images/hd_top.gif); } #hd_down{ width: 780px; margin: 0 auto; height: 36px; } #container{ width: 780px; margin: 0 auto; background-image:url(/images/b_bg.gif); background-repeat:repeat-y; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:small; color:#FFFFFF; } fieldset#formwrap { border : 0; } /* section fieldsets - it's common to make this border : 0; */ fieldset { border : 0; } #footer{ text-align: center; width: 780px; height: 23px; padding-top:5px; background-image:url(/images/f_bg.gif); background-repeat:repeat-x; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:small; } #browse{ width: 434px; height: 30px; background-image:url(/urlbox.gif); padding-left: 40px; } #input{ background-image: url(/urlbox.gif); no-repeat; border: none; padding-left: 40px; width: 474px; height:30px; font-size: 18px; } table, td{ font:100% Arial, Helvetica, sans-serif; } table{width:100%;border-collapse:collapse;margin:1em 0;} th, td{text-align:center;padding:.5em;border:1px solid #fff;} th{background:#d80119 url(/images/tr_back.gif) repeat-x;color:#fff;} td{background:#ffffff;color:#000000;} /* tablecloth styles */ tr.even td{background:#e2e2e2;} tr.odd td{background:#e2e2e2;} th.over, tr.even th.over, tr.odd th.over{background:#ff1933;} th.down, tr.even th.down, tr.odd th.down{background:#bce774;} th.selected, tr.even th.selected, tr.odd th.selected{} td.over, tr.even td.over, tr.odd td.over{background:#bce774;} td.down, tr.even td.down, tr.odd td.down{background:#bce774;color:#fff;} td.selected, tr.even td.selected, tr.odd td.selected{background:#bce774;color:#555;} /* use this if you want to apply different styleing to empty table cells*/ a { color:#FFF; text-decoration:none; border-bottom:2px dotted #CE3939; font-size: 15px; } .file_1 { background: url('images/urlbox.gif') no-repeat; border: none; padding-left: 40px; width: 434px; height:30px; font-size: 18px; } #credit { text-align:center; font-family: Arial, Helvetica, Verdana, sans-serif; font-size:small; padding-top:3px; } #credit a { color:#000; text-decoration:none; border-bottom:none; font-size: 13px; } #credit td ( background:#48494B; color:#000000; } #div_file{position:static;left:-9999px;} #div_url {position:absolute;left:-9999px;} and if possible make the background black thanks alot in advanced i been trying to do this for the last 2 days regards ahmed For some reason, when the image with the title of the page is two lines, in this case "Tax Service and Consultation" it bumps the content down in the div to the right, but only in IE and only if it is on two lines. I have an image illustrating what I mean but this awesome site won't let me post web addresses on it, WTF? I can send anyone a link to explain what I mean. The css and html validates. I cannot figure out what I am missing with this. Any help or suggestions will be greatly appreciated Thanks, Billy hi im trying to add the class "current" from this menu Code: http://www.cssplay.co.uk/menus/pro_dropline.html second example Quote: ...with top level 'current selection' tab to this menu Code: http://www.cssplay.co.uk/menus/pro_left_right_line.html appreciate any help Having a little trouble. I'm creating a horizontal nav menu with a bg image for each li, but can't seem to get the height set for the li in css. Using this code: Code: nl#navBar {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
nl#navBar li{
list-style-type: none;
display: inline;
}
nl#navBar li a:before {
content: url(../images/navbutton_left.gif);
}
nl#navBar li a:after {
content: url(../images/navbutton_right.gif);
}
nl#navBar li a{
text-decoration: none;
background-repeat: repeat-x;
background: url(../images/navbutton_bg.gif);
}
nl#navBar li a:hover{
text-decoration: none;
background-repeat: repeat-x;
background: url(../images/navbutton_bg_hover.gif);
}
I have tried several different variations of code putting height attributes and displays as block, but no combination seems to work. Okay... I'm working more with CSS these days, and am trying to accomplish something that I can't figure out... I know that I can create a div, assign a specific size, and background image, and then inside that div, I can add an empty href tag with a display:block and height assigned, and the entire div is linked, the same as linking the image itself... What I'm trying to accomplish is the same thing, only with a div that has textual content.... I could throw the href tag outside the div, but it isn't valid XHTML 1.0, and throws warnings... I've tried display:block, and height as usual, and even tried throwing the z-index on top of the other items, and with a clear:none; but to no avail.... I hope this is a decent enough description of the problem... anyway to accomplish this??? |
|||||||