|
CSS - Mac Css Compatibility Issues
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!... 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? 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 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! 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> I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> Okay I have this website www.deminyx.com and It looks decent in Google Chrome but stupid in IE my #content div is in a different place, can anyone help me clean up my code. I validated the HTML and CSS with the w3c validator too! UGHH lol! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Deminyx| Web Solutions</title><link rel="stylesheet" href="index.css" type="text/css"> </head><body> <div id="header"><a href="index.html"> Deminyx</a></div> <div id="side"> <table> <tbody> <tr> <td><a href="service.html">The Service</a></td> </tr> <tr> <td><a href="cost.html">The Cost</a></td> </tr> <tr> <td><a href="ease.html">The Ease</a></td> </tr> </tbody> </table> </div> <div id="content">This is my content, I wont waste your time.</div> </body></html> and the CSS Code:
body {
background-color:#666;
}
#header {
background-color:#399;
text-align:center;
font-family:Arial,Helvetica,sans-serif;
font-size:7em;
border-style:solid;
border-width:2px;
}
a:hover {
font-family:Arial,Helvetica,sans-serif;
background-color:#399;
}
a {
text-decoration:none;
color:#000;
font-size:1em;
line-height:1em;
}
table {
border:solid #000;
background-color:#00991c;
font-family:Arial,Helvetica,sans-serif;
line-height:2.2em;
width:20%;
font-size:1.5em;
margin-top:12px;
padding:2px 2px 2px 19px;
}
#content {
position:relative;
float:right;
background-color:#00991c;
font-family:Arial,Helvetica,sans-serif;
width:78%;
font-size:1.2em;
margin-top:-160px;
border-style:solid;
padding:4px 4px 4px 8px;
}
I just finished a layout using CSS and I'm aware that browsers 4.0 and earlier (or is it 3.0 and earlier?) won't be able to display it right. However, I also know that the browsers that do support CSS don't all display it the exact same way. I tested my layout using Internet Explorer 6 and Mozilla 1.6. I had to make a few changes to get Mozilla to display it close to what I intended. My question: which other browsers and versions should I test it on? I have always encountered problems trying to get my sites to work in IE6, mainly because it renders the margins as 2x the "right value". However I am curious: How does deliciousdays.com work perfectly in IE6 without using if IE6 conditional tag? I am making a site and this would be very useful. I try not to use the if IE6 conditional tag hack if possible. A friend told me that css websites are sometimes displayed wrong with some browsers; the tables are out of place etc. Is this true? are there any issues with certain sites? Is css the best way to design an html site now a days? Sorry im a newbie in this, Im going to start learning soon. Thanks !!! Just testing my new design on IE6 and it doesnt quite work. The table at the top of each category where it says "RW::Scripts" and "New Category" should fill the top of the frame 100% but it doesnt. You can see it in action here http://www.rwscripts.com/testsite/index.php It works fine in Firefox just not IE Heres the stylesheet that I am using Code: body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.tableborder{
border: 1px solid #000000;
background-color: #FFF;
padding: 0px;
margin: 10px 20px 0px;
}
.debugborder{
border: 1px dashed #000000;
background-color: #eeeeee;
padding: 5px;
margin: 10px 20px 10px;
}
.tablefooter {
background: #A0BED3;
padding: 2px;
height: 29px;
border: 1px solid #000000;
}
.tabletitle {
height: 29px;
border: 1px solid #000000;
}
.tableheader {
font-weight: bold;
color: #5285A2;
height: 23px;
border: 1px solid #000000;
background: #A0BED3;
}
.mainrow {
background: #EAEAEA;
}
.subfooter {
font-weight: bold;
background: #92ACBE;
height: 29px;
}
.statHead {
font-size: 12px;
font-weight: bold;
background: #004080 center;
height: 20px;
text-align: left;
vertical-align: middle;
padding: 4px;
border-top: 0px solid #999999;
border-right: 0px solid #999999;
border-bottom: 1px dashed #999999;
border-left: 0px solid #999
}
.statRow {
font: 10px Verdana, Arial, Helvetica, sans-serif;
background: #006699;
border-bottom: 1px dashed #999999;
padding: 2px;
}
.ucpmain {
font: 10px Verdana, Arial, Helvetica, sans-serif;
border: 1px solid #cccccc;
padding: 0px;
}
.ucpon {
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background: #006699;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding: 2px;
height: 25px;
}
.ucpoff {
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background: #004080;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding: 2px;
height: 25px;
}
.copyright{
font-family: Verdana, Tahoma, Arial, Sans-Serif;
font-size: 11px;
line-height: 12px;
text-align: center;
}
.purple { color:purple;font-weight:bold }
.red { color:red;font-weight:bold }
.green { color:green;font-weight:bold }
.blue { color:blue;font-weight:bold }
.orange { color:#F90;font-weight:bold }
I have CSS that works great in FF, but then when I go to check it all out in IE, it looks like s it (if you know what I mean...) Heres my CSS: Code:
input.submitbutton
{
color:#FFFFFF;
background-color:#33CC00;
background-image:url(../images/buttonbg.gif);
border: 1px solid #598527;
}
(The image tags arent working I guess, so heres the links to them...) and heres the outcome in FF http://img214.imageshack.us/img214/1048/coolffkw9.png and then the outcome in IE... http://img214.imageshack.us/img214/342/ffof5.png I think it does this because the buttons in IE get rendered the same as windows vista does it, and in firefox they are rendered differently? I'm not sure. Anyway, how can I fix this horrible mistake to make it look the same as it looks in Firefox? Thanks a lot guys. http://warcraftpress.com/index.php (If it displays a whitepage, revisit the link again) Working on browser compatibility, and well, IE is a stubborn one, yes? For some reason, it places post areas below the right menu, as well as some spacing issues. I've checked in FireFox 3 (which I designed in), Safari, and Opera, but only IE does this issue. (IE7, I mean. I no longer care to support IE6) One other thing I see is the menu items's arrow graphic cuts off in other browsers, I'd say it has to do with the height and other specifications in the CSS, but I do make a mess to try and make something work :P The big arrow graphic (the normal) is at a height of 22, while the small (sub menu) one is 18. Both are in pixel measurements. Thanks a lot in advance for the help! You can find the stylesheet he http://warcraftpress.com/wp-content/themes/default/style.css Hello, I've got a question about CSS3. That are the correct procedures to make my CSS code compatible with all the browsers ? For example, I want that the elements of my website stay identicals on all the browsers. Thank you in advance ! http://www.sphinxgaming.com/OpportunIT/?page=home In any browser except IE6 the footer floats just above the bottom of the page, but in IE6 it goes WAY down. Here is the CSS code: Code: html { height: 80%; }
body
{
min-height: 80%;
height: 80%;
}
A:link {text-decoration: bold}
A:visited {text-decoration: bold}
A:active {text-decoration: bold}
A:hover {
text-decoration: bold;
color:#307D7E;
}
#container
{
width:80%;
height:100%;
margin:0 auto;
text-align:center;
font:helvetica;
display:block;
}
#header
{
width:auto;
display:block;
font-weight:bold
}
#body
{
width:auto;
font:14px "Helvetica";
text-align:left;
min-height: 124%;
display:block;
background-color:#BDEDFF;
}
ul#navbar {
background:url(images/navbg.png) repeat-x left top;
margin:0;
border-bottom:1px solid #00CCFF;
border-top:1px solid #00CCFF;
list-style-type:none;
height:31px;
}
ul#navbar li {
float:left;
}
ul#navbar li a {
display:block;
padding:5px 15px 4px;
font:bold 16px "Helvetica";
text-decoration:none;
color:#151B8D;
letter-spacing: -0.1em;
}
ul#navbar li a:hover {
color:#151B54;
}
ul#navbar li a#current {
border-bottom:1px solid #00DDFF;
border-top:1px solid #00DDFF;
color:#151B54;
font:bold 16px "Helvetica";
}
#titlebar
{
width:auto;
background-color:#BDEDFF;
padding-bottom: 5px;
text-align:left;
font:bold 19px "Helvetica";
display:block;
}
#footer
{
width:auto;
display:block;
background-color:#AFC7C7;
}
I'm working on reworking my flash site into a CSS/HTML site. Tired of dealing with flash. Anyways....I am working on this page currently and am having trouble getting 3 divs to line up properly in IE. They look great in Firefox! Take a look and let me know if you have any ideas. Any help is much appreciated. Here's the link www .crealities.com/2008/inspiration.htm Hello, I have my CSS nav bar working perfectly in FF but in IE it is moved over too far to the right. I have no idea what is causing the difference but have tried a lot of stuff with no luck. I am pretty new to CSS so it could be a minor thing...thought you guys might be able to help! You can see the nav bar at stratastones.net I've decided to make a thread to ask for help on my journey of recoding my design to CSS/XHTML tableless. I understand you all do this out of the goodness of your hearts, so I hope you don't take this as a "I demand assistance" thing. (original layout -> Here ) http://www.gaminghybrid.com/wii-style.html The current issue is the menu items. In FireFox 2, it looks perfect. The right proportions and everything. However, in IE7, between the menu header and the first menu item, there is some strange spacing. What could be causing this? For now, all my CSS is on the page, where I'll have it be in a CSS file once I've completed. Thanks in advance It's about time I moved away from the incorrect table layouts and help contribute to a better web. hi, ive been creating a website for a project and ive used css throughout. Im not experienced with css but managed to develop a decent front end. My problem is that although it displays perfectly in IE it messes up in netscape. Im not sure which parts of the css conflict. Can anyone suggest anything or point me to some website that may help? Cheers The screenshot from netscape is below, its mainly the footer top line and the navbar which fails to span the full screen width. Netscape screenshot This is one of the pages for comparison Main site Thanks in advance for any help |
|||||||