|
CSS - Ie Giving My Store Errors
I need someone to look at my site and see why it doesnt work right in internet explorer, and looks fine in mozilla and google chrome. I am sure it has something to do with a .css file somewhere.
glockpartsrus.com/products.php?cat=46 for an example. Similar TutorialsHi there, First of all, i posted this in the HTML section as well, but after some consideration i think it is a CSS needy question. However i can not remove my own post from the HTML section? Problem explained: I would like to give a maximum width to a text in a <pre> </pre> tag. Now by giving it a standard width or a width via a cascading style sheet class does not work. I also tried wrapping it in a table and / or a div with the width attribute. Anyone got an idea how to solve this? Regards, Sander Meilink By the way, pre does what it is supposed to do, it remembers the linebreaks a.o. very well. Example of all things tried combined: Code:
<table cellspacing="2" cellpadding="2" border="0" width="20">
<tr>
<td width="20"><div style="width: 20px;"><pre style="width: 20px;">asd fasod khgfas kjdgfkjasg dfkjhsagd fjgas sadkjfg dsafkjhg sdfkhg jhg jkhgdsfjkhg jkhgsdfa</pre></div></td>
</tr>
</table>
I need help with my navigation menu... The problem is that I want the div container to be gray, but the white navigation links have gray bleeding below and to the right of each link. It also screws up any border I try to put between the navigation menu and anything else below it. Here is the markup: <div id="container"> <div id="header"> <h2>Test Header</h2> </div> <div id="left_column"> <ul> <li class="main_nav"><a href="#">Link 1</a></li> <li class="main_nav"><a href="#">Link 2</a></li> <li class="submain_nav"><a href="#">Sublink 1</a></li> <li class="submain_nav"><a href="#">Sublink 2</a></li> </ul> <p class="p_left_column">This stuff goes below the main navigation menu.</p> </div> <div id="main_column"> <h2>A test heading.</h2> <p>A test paragraph.</p> </div> <div id="footer"> Test footer </div> </div> And here is the style sheet for div left column: #left_column { float: left; width: 160px; margin: 0; padding: 0; line-height: 130%; } #left_column ul { padding: 0; margin: 0; list-style: none; } li.main_nav, li.submain_nav { text-align: left; width: 100%; display: block; /*border-bottom: 1px solid #aaa;*/ } li.submain_nav { line-height: 110%; } li.main_nav a { padding: 5px 0 5px 8px; display: block; color: #0380B7; font-size: 16px; background: #fff; text-decoration: none; } li.main_nav a:hover, li.submain_nav a:hover, li.main_nav a.active:hover, li.submain_nav a.active:hover { background: url(./images/right_arrow.gif) left no-repeat #eee; color: #00F; } li.submain_nav a { padding: 0 0 1px 20px; display: block; color: #0380B7; font-size: 13px; background: #fff; text-decoration: none; } li.main_nav a.active, li.submain_nav a.active { background: url(./images/right_arrow.gif) left no-repeat #fff; color: #00F; } p.p_left_column { font-size: 13px; line-height: 130%; font-family: arial, helvetica, sans-serif; border-top: 1px solid #aaa; padding: 5px; color: #000; } p.p_left_column a { border-bottom: 1px dashed #99CF16; text-decoration: none; color: #0380B7; } p.p_left_column a:hover { border-bottom: 1px solid #00f; color: #00f; } Any help would be greatly appreciated. Thanks for reading. please click here to read my message. My code: Code:
#whitebox {
width:600px;
background-color:#fff;
padding:10px;
margin-left:auto;
margin-right:auto;
}
#salmonbox {
width:500px;
height:50px;
padding:10px;
background-color:salmon;
margin-left:auto;
text-align:left;
}
Hey all.. I'm still new to CSS in general, but know how it works. Anyway, I'm trying to get an element in a DIV to display properly, but for some reason, it isn't Code:
.contenthead {
background-image: url(player/images/player_03.gif);
background-repeat: repeat;
height: 50px;
color: #000000;
font-weight: bold;
font-size: 40px;
}
The result is at http://www.fairfieldmediacoop.com/fpactest/play.php?recordID=hO2GmjtlvSJKBgcqp4LZ The only thing I can think of is that the text I am trying to enlarge, which is the "Chamber Talk" in black above the video (center of the strip under the header) is encased in a Table. Would that cause it not to listen? Hi I have a master page in my .net project that has a template. In this template it has a line for all links a:link { color......} So all my pages get this style sheet. Now I have a jquery tab plugin that has a theme and it also uses a:link{} but it uses white but the a:link in my master page is overriding this. When I look with firebug at the css the color from the jquery theme is crossed out. How can I stop this from being crossed out? EDIT Never mind, fixed it myself eventually. i have a horizontal navigation pane in which i want 5 links to be placed across the top. any ideas? ive tried setting the width a percentage and a fixed width but no luck. width:50px; Hi All, I am trying to make my table do the attached, where it has a border around the entire table but has a 2px space edge... Like the attched image, any ideas? I'm so excited! I recently decided to try again (the third time) to see if I could convert my horrid table layout to divs. I was finally able to make something reletivly good in most browsers, but I am still having alot of browser-related problems! Normally I would have given up by now...but i found that my table layout was at 28 seconds over 56.6 ( :O ) and once i converted it it was only 3 seconds over (double :O ) Anyway, pretty much everything validates (including the css) when I put in the doctype, but when the doctype is in it looks like a mess in all browsers. I've been using transitional xhtml. When I take it out it looks better in all browsers, but is still really bad in all but IE. I have put together on my site two pages with the same code except one has the doctype and the other doesn't. The css for both is: Code: body {
background: #EFF7FF url(bg.gif);
text-align:center;
padding:0;
}
#outer {
border:5px double #234B77;
width:650px;
padding:0px;
margin:0px;
}
#hdr {
width:650px;
height:151px;
background: #21558C;
}
#bar {
width: 650px;
height:90px;
background: #ADD7EF url(rainbowsitedesign_2x1.gif);
border:solid #000000;
border-width:0px;
padding-top: 37px;
text-align:left;
}
#bodyblock {
position:relative;
background: #ADD7EF url(backgroundforsite.gif);
width:650px;
padding:0;
}
#l-col {
float:left;
background: #ffffff url(white.gif);
color: #333333;
width:140px;
border-left: 1px solid #234B77;
border-right: 1px solid #234B77;
border-top: 1px solid #234B77;
border-bottom: 1px solid #234B77;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}
#coltop {
height: 42px;
background: #3971B5 url(tabletop.gif);
color: #000;
text-align: center;
padding:10px;
font-size: 105%;
font-weight: bold;
color:#1A3958;
}
#cont {
width:485px;
background: #ffffff url(white.gif);
border-left:1px solid #234B77;
border-right:1px solid #234B77;
border-top:1px solid #234B77;
border-bottom:1px solid #234B77;
text-align:left;
margin-top:10px;
margin-bottom:10px;
margin-right:5px;
font-size: 100%;
font-weight: normal;
color:#1A3958;
}
#contentop {
width:485px;
height:42px;
background: #3971B5 url(tabletop.gif);
color: #333333;
border-left:0px solid #234B77;
border-right:0px solid #234B77;
border-top:0px solid #234B77;
border-bottom:1px solid #234B77;
margin:0px;
text-align: center;
padding:10px;
font-size: 105%;
font-weight: bold;
color:#1A3958;
}
#ftr {
width:650px;
height:25px;
background:#346EB4;
color: #333333;
border: 0px solid #000000;
margin:0;
}
#ftr2 {
width:650px;
height:25px;
background:#346EB4;
border: 0px solid #000000;
margin:0;
}
#ftr3 {
width:650px;
height:99px;
background: #346EB4 url(websitedesign.gif);
border: 0px solid #000000;
margin:0;
padding-top: 20px;
}
#home {
width:50px;
height:10px;
border: 1px solid #000000;
margin:0;
}
p:first-letter {
font-size: 120%;
font-weight: bold;
}
a.red:link { text-decoration: none; color: #234B77; }
a.red:visited { text-decoration: none; color:#ff0000; }
a.red:hover { text-decoration: underline; color:#ff0000; }
a.orange:link { text-decoration: none; color: #234B77; }
a.orange:visited { text-decoration: none; color: #ff6600; }
a.orange:hover { text-decoration: underline; color:#ff6600; }
a.yellow:link { text-decoration: none; color: #234B77; }
a.yellow:visited { text-decoration: none; color: #ffff00; }
a.yellow:hover { text-decoration: underline; color:#ffff00; }
a.green:link { text-decoration: none; color: #234B77; }
a.green:visited { text-decoration: none; color: #009900; }
a.green:hover { text-decoration: underline; color:#009900; }
a.blue:link { text-decoration: none; color: #234B77; }
a.blue:visited { text-decoration: none; color: #0000ff; }
a.blue:hover { text-decoration: underline; color:#0000ff; }
a.violet:link { text-decoration: none; color: #234B77; }
a.violet:visited { text-decoration: none; color: #660066; }
a.violet:hover { text-decoration: underline; color:#660066; }
#ftr2 a:link { text-decoration: underline; color: #152F4D; }
#ftr2 a:visited { text-decoration: line-through; color: #ccc; }
#ftr2 a:hover { text-decoration: none; color: #88B2DC; }
Here are the two pages: With doctype: http://rainbowsitedesign.com/withdoctype.html Without it: http://rainbowsitedesign.com/nodoctype.html How can I fix both my browser problems and my doctype problems? Any help is app! Hi all, I noticed that when I give the text-align style as "justify", the words are unevenly spaced to justify the alignment. But it looks really weird if there are only two long words in a sentence and many small letter words in the next line. Can any1 suggest a way to align the text inside a <p> to be evenly spaced as well as justified. How to make the text to hyphenate (i.e split words with a '-' and display it in the next line). Is there a CSS property to accomplish this. I wud be grateful to recieve comments. Thanks in Advance. - John I am using the following code. In firefox the input box (including the border) fits a nice box of 83 by 15. In IE it seems to not be so well, and is bothering things near it. Any ideas on how to rectify this? Code:
<td><input type="text" class="loginbox" size="13" /></td>
.loginbox
{
border: 1px;
border-style: solid;
border-color: #9AA8C3;
padding: 0;
margin: 0;
text-decoration: none;
font-size: 11px;
color: #40668C;
}
Hi, Can someone plz tell me how to fix these 3 errors? URI : http:// www. freeadverts . co . nz/0185cbcadbc86a9b9ffba4c9c7347964.css Error 1: 45 .subframe Parse Error opacity=95) Also what does 45 stand for? URI : http:// www. freeadverts . co . nz Error 2: 37 Value Error : width only 0 can be a length. You must put a unit after your number : 120 120 Also what does: a. 37 mean &; b. 120 120 mean? Error 3: 37 Value Error : height only 0 can be a length. You must put a unit after your number : 60 60 Also what does: a. 37 mean &; b. 60 60 mean? Thanx in advance. Hi all, I've just put together a "template" webpage that is controlled entirely by CSS...I'm very happy with it and it works like a dream in IE6+, but when I test on Mozilla and Opera I end up with my hyperlink text not obeying the CSS rules and find all my positioned graphics don't line up correctly either. Both Mozilla and Opera are the latest versions, I haven't tested on Netscape Nav yet but I'm concerned with the problems I'm having getting my page to display consistently... Any suggestions as to how to tackle this problem? I don't want to recreate different CSS for different browsers...but if I have to, is there a resource on the web available so you can see which CSS tags/properties render correctly with different browsers? In addition, if I use Javascript to specify certain CSS styles based on the browser type...how do I "load" those differing SS using javascript? I can do browser detection, but I'm not sure on getting different SS "loaded" based on the selection. Wow...bit of a mouthful there... Im trying to do some CSS frame emulation for a curve on my site so that it follows the screen, but (and this is a surprise, i feel) it only works in IE!! Not in firefox. Im not sure why. Here is the CSS file that holds the frame emulation: Code:
@media screen
{
body
{
margin: 0;
padding: 1em 1em 1em 14em;
color: #000;
background: #fff;
}
div.fixedBox
{
position: fixed;
top: 1em;
left: 1em;
width: 12em;
border: 1px solid #000;
background: #eee;
}
div.fixedBox p
{
margin: 1em;
}
/* Don't do this at home */
* html
{
overflow-y: hidden;
}
* html body
{
overflow-y: auto;
height: 100%;
padding: 0 1em 0 14em;
font-size: 100%;
}
* html div.fixedBox
{
position: absolute;
}
/* All done. */
}
Is there an error here? I got this off here. Not sure what is going wrong, like i said it work in IE, but not firefox, whereas the example on the above site works in both. Any ideas? Hi, I'm getting two errors when I view my new theme but only in IE6. The first error is on long posts (Not pages) where the header and footer sections are slightly offset to the rest of the body. If I make the post shorter then the problem disappears. An example can be seen he Example The page look fine in FF 1.5.01 and Opera 8.51. The second issue is to do with the menu images on the top of every page. When I hover over the image (To select the page) the image turns black for a few moments and then returns almost immediately, whilst it doesn't effect the usability it doesn't look very good. I'm guessing it has something to do with the CSS and background images but am unclear what I should do. Any help or suggestions you can offer would be appreciated. TIA Phillip http://www.mydragonflygifts.com/index.php Need some major help here. Clicking the link above, you will see the problems. The whole page needs some help. Looks 100% different in FF than IE. What can I do to fix? I would pay if someone was able to fix the site 100% and possibly could use some helps on future jobs if interested. edit:figured out Am putting the finishing touches to my site but in firefox 8 the top of the side menu there is a space and login part is to low as well. My site is www.carswapped.co.uk |
|||||||