|
CSS - Bold Not Working On Pc Browsers
The state titles are nice and bold on my mac browsers -- however, pc browsers won't make them bold. Here is a link to a windows xp screenshot: http://www.browsercam.com/projects/199027/3899787.jpg
Any ideas? Similar TutorialsHey all, the test page is here. Notice when you expand the "view more details" in IE8 to the point where it is supposed to push the page down, it doesn't! But it does in FF/Safari. HTML CSS Potentially relevant CSS: Code: body {
margin: 0;
padding: 0;
min-height:0;
}
div.container {
width:100px;
}
div.outerBody {
width:100%;
min-height:0;
}
div.innerBody {
width:100%;
background-image:url("../../images/artist_center/body_bg.jpg");
background-repeat:repeat-x;
min-height:0px;
height:auto !important;
background-color:#cedce5;
text-align:center;
margin: 0;
position:absolute;
}
div.tabContent {
width:945px;
min-height:596px;
border:solid 1px #cccccc;
float:left;
position:relative;
margin-left:14px;
padding-bottom:14px;
margin-bottom:14px;
}
I'm using clearfix to make things work in IE7, but clearly there's some kind of other problem going on. Thanks for any help! styles.css Code:
.allRoundedCorners {
border-radius-topleft: 18px; -moz-border-radius-topleft: 18px; -webkit-border-top-left-radius: 18px;
border-radius-topright: 18px; -moz-border-radius-topright: 18px; -webkit-border-top-right-radius: 18px;
border-radius-bottomleft: 18px; -moz-border-radius-bottomleft: 18px; -webkit-border-bottom-left-radius: 18px;
border-radius-bottomright: 18px; -moz-border-radius-bottomright: 18px; -webkit-border-bottom-right-radius: 18px;
}
index.php Code: <div class="allRoundedCorners"> my text </div> This works ok in Firefox, Google Chrome and Safari. But fails to work in IE 9, Avant Browser 2012 build 8 and Opera 11.60 Can anyone suggest a possible fix or know how I can code it so the rounded edges of the DIV's have the rounded edge and not a boxed area. I'm trying to set the background image of my header and for some reason its not being applied at all. CSS: Code: #header
{
background: url('../Images/Master/Header_Background.jpg');
color: White;
width: 1000px;
height: 150px;
position: relative;
}
The image is the same height and width of the header. I know the image is there because I can use the same url in an <img> tag and it shows up fine. The header is inside a container which I'm not setting any background attributes at all. I'm not setting any for the body either. I don't know why the image isn't showing. Thanks. I've been searching this for about 4 hours today, and have yet to come across a good answer. Right now my site looks fine in Firefox, IE6, IE7, and Opera. However, it does not validate because I'm using the _margin-top and .margin-top tricks to force the bottom line of links in IE. My site can be viewed at startdesigning.net (not allowed to post link because I new, I guess) and the css in question can be found at startdesigning.net/style.css - again, can't post a link. If anyone has any suggestions to validate without changing the appearance, I would love to hear them. Thanks, Andrea Is there any way to use multi level drop down menus that work on all browswers(IE 6 and 7, firefox, safari) without using .htc file or javascript included? This is nice, but the css in too messy. http://www.bluescopesteel.com If you have any betterones please tell me. Cheers Hello, I'm working on some really simple CSS and it's giving me wildly different results in Firefox and in IE. Here is the stylesheet: PHP Code: body { background-color: #DECFEF; } .example { background-image: url("images/example.gif"); border-width: thin; border-color: white; border-style: solid; padding: 35px 35px 35px 35px; } And here is the HTML file: PHP Code: <html> <head> <title>Chatterbox</title> <link rel="stylesheet" type="text/css" href="/teststyle.css"> </head> <body> <table class='example'><tr><td> hello </td></tr></table> </body> </html> All of this works (the image in the background, the white border, etc.) except the padding! In IE there is no padding at all, but in Firefox there is 35px padding, as specified in the stylesheet. You may see this yourself if you go to this URL in the two different browsers: http://www.chatterboxletters.com/test3.html Any help is greatly appreciated ~j. I have been using <b>,<i>,<u> all along, but I was seeing things about strong and em with style sheets. I went to w3c.org and found this commment Quote: The following HTML elements specify font information. Although they are not all deprecated, their use is discouraged in favor of style sheets. What do they mean in favor of style sheets? You still need a tag in the text to make a word bold, why not <b>bold</b>? Can someone shed some light on this? The section of my site that this effects is a login area, so I can't provide a link... I can post some code if I need to... I have a div with this class applied to it. Code: .minidaysofweek div{
width:13.6%;
float:left;
font-weight:bold;
}
It was working fine here, but when I put it in my site template, the bold doesn't work. So I added color:blue; just for testing, and it changed the color... what would keep the font-weight from being applied? The minititle class isn't bolding either like it should... <edit>FF and IE effected</edit> I want to do something like: Submit but i dont know how to do it? i tried doing input value ="<span style="AK">S</span>ubmit" /> but it doesnt work.... Hey guys, how do i put the bold command into a css sheet? I want to have bold consistantly throughout a page. ------- body { font-family: Arial; font-size: 13.5px; } td { font-family: Arial; font-size: 13.5px; } th { font-family: Arial; font-size: 13.5px; } .bodystyle { font-family: Arial; font-size: 13.5px; } .small { font-family: Arial; font-size: 9px; } .medium { font-family: Arial; font-size: 12px; } .big { font-family: Arial; font-size: 16px; } .xbig { font-family: Arial, Helvetica, sans-serif; font-size: 24px; } .expanded { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 24px; letter-spacing: 2px; } .justified { font-family: Arial, Helvetica, sans-serif; text-align: justify; } .footer { font-family: "Times New Roman", Times, serif; font-size: 9px; color: #999999; } .box1 { padding: 3px; border-width: medium; border-style: solid; border-color: #CCCCCC #666666 #666666 #CCCCCC; } .box2 { font-style: italic; word-spacing: 2pt; padding: 3px; border: 1px solid; } Hi everybody I'm sure many of you have come across the problem where your links jump when you increase font size or bold your text when you hover over them. The reason obviously being that the anchor is pushed bigger because the text content increases in size, thus pushing all following links around. I've solved this problem before for links on top of each other by defining a line height. My problem is specifically for links next to each other. I have solved this by placing each anchor inside a div and specifying a specific width for each. Although this works, it is not overly elegant. I was wondering if someone out there has a better solution to this? Thanks in advance. Hi, targeting both IE and FF i seem to experience compatibility issues ... The CSS design on IE looks perfect, but same JSPs on FF gives a little bit of dull on colors (or fade) ... I also found some strange behavior in FF on my struts application which i don;t see when testing on EE. Sometimes a page reloads itself on submit... Any issues around this? Oh, i know blinking text is not adviced, but can't seem to get it to work either (using CSS text-decoration : blink) Thanks for your help Hi All, Just in the middle of designing a website for my personal hobbies. I have used alot of CSS to create the layout of the page. The problem being it looks perfect in Firefox, Opera, Seamonkey etc etc BUT NOT IE!!! In IE it is all over the place, nothing is where it should be. I checked my CSS against w3 validator, and it came back with a few errors, so i decided to fix them... it then looked even worse... in ALL BROWSERS! So i decided to go back to how i had it originally. The site in question is my username. You can access the css stylesheet file by adding /test.css to the end of the domain name. Any information, or anyone else had problem like this? All the best for now, Mike I have a three column (25% - 50% - 25%) page layout via CSS which works perfect in IE. But it does not work in Firefox. Here is my CSS code. #leftColumn { float:left; width:25%; margin: 5px 3px 0px; padding: 0; } * html #leftColumn { width:25%; } #rightColumn { float:right; width:25%; margin: 5px 2px 0px 3px; padding: 0; } * html #rightColumn { width:25%; } #main3Column { margin:5px 25% 5px 25%; padding: 0; /* 50% or auto or no width does not work in IE. 100% here is the remaining of the available after left and right columns */ width:100%; } The ID 'main3Column' is for the middle column. Width: 100% works fine in IE as it excludes 25% for left and 25% for right and 100% of whatever remaining for the middle column. But in Firefox, middle column is taking 100% of the screen width instead of the remaining after left and right columns. Is it possible to come up with a code which works for both IE and CSS ? Please help. I have been searching/googling and whilst i have found people saying there is a difference in how browsers (IE, FF etc) display fonts, i have yet to find an answer that works. I have tried the giving body tag "font-size 100%;" method but it doesnt work... some people have said to use px as disabled people will probably override this with their own stylesheets... Hello, With following css for header Code: div#header{
height:75px;
background-color:#ffffcc;
}
I am getting three different views in IE, FF, Opera. In IE entire background color is pale yellow, In FF only the line is pale yellow. In opera line and area below it is pale yellow. Here goes goes html. Code: <div id="header"> <h3 align = "center">Welcome to <b>Your Space</b></h3> </div> What is going wrong here? Thank you. Hi all, I seem to be stumped on something that is probably simple. At this test site you'll notice the left nav area as well as the text content area. I am trying to set it up so that both are 6 pixels below the header image. Obviously, then they would be even with each other. Everything I've tried has come close but never right in both FF & IE. Could someone please give me a hand with this? Thanks! Chris I'm in the process of revamping my website and am trying to use css to position things. I've used browsershots to view what the website looks like in different browsers and platforms. All is well with one exception, IE6! Grrr. Now I'm a total css newbie so what I'm doing wrong is probably painfully obvious to you guys, but I've been beating my head against this for a while now and would appreciate it if someone could take a look over my shoulder and see if they can spot the problem. If you use IE6 you'll notice that the featured products are listed below the last 'service ad' image instead of at the top of that 'column' even with the first 'serivce ad' image. Again, any help in diagnosing/fixing this issue is greatly appreciated! Here's a link to the page: http://www.decaldepot.net/zencart/index.php Hey All: Its that time again- testing my pages in different browsers. I have browser cam for another 7 hours, this is my snapshot of the page I am testing. Ok, this is the first time I am testing my code. Any reason why older browsers are not interpreting my CSS correctly? Maybe something I should know about older browsers. Any feedback is helpful- thanks I've been having a hard time with browser compatibility and I need a bit of help. This is what I'm trying to acheive. It's a link bar on top and then a page that contains left and right headers, dividers and content plus a footer (height is not an issue right now). I would like the #page to have a 2px border and every element inside to have a white 2px padding. It seems that in IE, if I set #page with a 2px padding, I get exactly what I want but Firefox does not interpret it the same way. Is there a hack/workaround for this. I've attacned a picture of what I'm trying to get at. Thanks Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css"><!--
html, body {
margin:0;
padding:0;
height:100%;
}
div {
margin:0;
padding:0;
}
div#holder {
margin:auto;
margin:auto;
width:800px;
height:100%;
background:black;
}
div#links {
width:auto;
height:30px;
background:pink;
}
div#page {
width:auto;
height:100%;
background:white;
border:2px black solid;
padding:2px;
}
div#left {
float:left;
background:red;
width:180px;
}
div#right {
float:right;
background:blue;
width:610px;
}
div#footer {
clear:both;
width:auto;
height:30px;
background:green;
}
--/></style>
</head>
<body>
<div id="holder">
<div id="links">1</div>
<div id="page">
<div id="header">
<div id="left">1</div>
<div id="right">1</div>
</div>
<div id="divider">
<div id="left">1</div>
<div id="right">1</div>
</div>
<div id="content">
<div id="left">1</div>
<div id="right">1</div>
</div>
<div id="footer">1</div>
</div>
</div>
</body>
</html>
|
|||||||