|
CSS - Site With Huge Gaps Under Safari
hello all,
i'am at complete loss for now. my site promodivin uses mootools to enrich it by adding slides and accordeon effects. Works great with IE and FF but using Safari it displays huge blank sections. My text's gone. It's even clearer on the 'Services' tab where I can see some narrow sections. To make the effects work, you may click on the headers and it should collapse the appropriate section. I believe the issue stems from the ids used only for the purpose of mootools. Here's an html exerpt from the frontpage: Code: <div id="h_toggle1"><a href="#"> <h1>Communication</h1> </a></div> <div id="horizontal_slide1"> <ul class="bullet_point"> ... and the titre_toggle.css describing the elements used. Code: h3.section {
margin-top: 1em;
}
#vertical_slide1, #horizontal_slide1,
#vertical_slide2, #horizontal_slide2,
#vertical_slide3, #horizontal_slide3 {
background: #E6EAEF;
margin-top: 0;
padding: 10px 10px 0 10px;
border: 1px solid #D5D8DD;
}
#h_toggle1, #h_toggle3, #h_toggle2 {
}
div.marginbottom {
/* Since the Fx.Slide element resets margins, we set a margin on the above element */
margin-bottom: 10px;
}
I'll appreciate any insight. safari 4.0.3 --> KO IE 6+ --> OK FF 3.5 --> OK mootools 1.2.4 joomla 1.5.15 Similar Tutorialsheres my currently working on site it look great on IE, Firefox and opera but i just see a blank page in Chrome and Safari!! web site: macmillanpc.host56.com/Dreamy_Elegance_template/ please help me! :/ check source, the css is in there (not linked) these is really f... me off. Sorry if its too vague, let me know if you need more details. Hi- I am finishing up design of a site, and validated it with the W3c validator (everything is valid). When I go to it on IE, everything shows up the way that it should. However, when I go to it on Firefox or Safari, on three pages there seems to be a 'chunk' taken out of the left side. If you compare the three pages in IE and Firefox you should see what I mean (devshed won't let me post links so sorry for the formatting): 01f086d.netsolhost dot com/yk/services dot html 01f086d.netsolhost dot com/yk/experience dot html 01f086d.netsolhost dot com/yk/principals dot html It seems to be the page length that is causing this, because on shorter length pages, there is no chunk. I am using DIV tags to lay the site out, which should be pretty easy to follow if you view source. My CSS file is at: 01f086d.netsolhost dot com/yk/assets/css/defaultPage dot css (also validated with W3C). Any help would be GREATLY appreciated as I have spent hours on this last problem and can't figure out what is causing it! I have a website (www.fullforcecreative.com) that displays properly on I.E. and Firefox. I just recently pulled it up in Google Chrome, and it appears no style sheets are being imported. I then thought "that is strange, but Safari is based on the same thing (kinda), so I'll load it in Safari." Same issue. No style sheets. Has anyone seen anything like this before? I link to one style sheet in the header. Code:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css; charset=utf-8" media="screen" />
This style sheet linked to from that line: Code: @charset "UTF-8"; @import url(yaml/core/base.css); @import url(css/navigation/nav_shinybuttons.css); @import url(css/screen/basemod.css); @import url(css/screen/content.css); @import url(yaml/print/print_003.css); All the other stylesheets open with the Code:
@charset "UTF-8";
@media all {
insert css here
}
The site is using YAML (http://www.yaml.de/en/) as a framework for the CSS. The only issue I could find relativly close to it was this: http://www.davidroessli.com/logs/2007/03/safari_utf8_rendering_glitch_f/ I made the change listed there (because the CSS stylesheets are in UTF-8), but it made no difference. Does anyone have any ideas? This is driving me up the wall. It does display properly in I.E. and firefox. Thanks, seth Hey guys, I'm in need of some help here. Okay, so. My site looks the way I want so far on google chrome and safari (mac). And right now I'm at the stage of getting it to display like the two. If anyone who decides to help doesn't have access to certain browsers, I'll further explain, but I think it's easiest said to see for yourself. Right now I'm focusing on ie6, ie7, ff3. The markup in some areas is whacky, I know, but I decided to pick up where I left off on this project (which I first began building awhile ago) instead of starting completely over with a good template. http://thecheckoutplace.com/compute...eOneNetbook.php If anyone can offer a hand, it means a lot. Cheers guys. i'm working on the following page, and I've now just noticed that it doesn;t look right in IE 6....It looks ok in Mozilla and IE 7 though... Anyway, if you look at it in IE 6, you'll see the text is HUGE....I tried to alter the font property in the body{} of my CSS (in a conditional comment), but that didn;t do anything... I'm sure's it's a tiny something or the other somewhere that's making it do that...perhaps my template is conflicting with the blog software...I dunno for sure, and my screen is starting to get fuzzy (meaning i need to take a break), so maybe one of you can pinpoint the problem... Thanks. Hi, Got my validation problem sorted (Thanks jarra) but now my page has a problem with IE6. Well, it had the problem yesterday but I thought I fixed it. If you view the page in Firefox and Opera the first image is about 10px break away from the text above, however in IE6 it's at least 100px away. It doesn't matter what image I use or where I put, it's always the first image. When it happened yesterday I reduced the width of the image by 2 pixels and eveything seemed fine. Is it a CSS problem? CSS: http://www.planetphillip.com/style.css Page: http://www.planetphillip.com/index.php TIA Phillip I'm having trouble with a layout issue. Position is fine in IE, but in Firefox and Mozilla there's a 55 pixel gap on this drop down list and an even larger gap when the list is expanded. Here's my css for the navbar: /* Navbar */ #nav { width: 158px; margin-left: 0; } #nav ul { font-family: "Trebuchet MS", serif; font-size: 11px; margin-left: 0px; list-style-type: none; } #nav ul li ul { margin-left: 12px; } Any suggestions or help would be appreciated. hi all... i have a huge style sheet, and i need to convert it to display properly in IE, how do i go about doing that, not recoding all the styles, i am also thinking about the check to se which style sheet to use, i think that i saw a method to do it under the <link> tag or something ?... help a fellow out there are over 800 lines of code in the style sheet.... frank/ Hi, Sorry to keep posting questions here! THe transition from tables to CSS has been arduous so far. This page has a huge gap in the center in Firefox - looks fine in IE. I figure it's caused by the #rightnav and the right float. I just can't figure out how to fix it. I can keep it open by throwing in a load of <p> </p>, but that defeats the purpose I'm starting to think I should throw in the towel and go back to tables!!! check this page Cheers I can't seem to work out where the huge space at the bottom of the pages are coming from. This is the test page http://midnighttempest.com/layouttest.html as you can see at the bottom of the page there is a huge gap under the text which i can't get rid off. Anyone help? i am currently making a page which makes use of some JS that swaps between three div containers by changing the display to hide on all but one... anyhow... i here is the page.. if you click on "best reviews" it adds a huge gap but if then click on "worst reviews" the gap disapears clicking back onto "best reviews" the gap is gone too... it is very tricky... i've used this JS before, and it worked fine... and it this page looks and acts fine in IE6... i just thing the space of one of the containers is remaning, even tough it is being hidden... here is the page... i've put a 1px dashed #900 border around all divs so as to make it easier to debug... Mini Catalog What is your go-to forum for web design (HTML, CSS, JScript, PHP)? I hate to be so spread out across a ton of forums around the same topic, but have yet to find a forum that seems to be very active. Which do you think have huge active communities of knowledgeable designers/developers? Sorry, often made request but I can't get it sorted - please can someone tell me why I have gaps in FF between header, maincontent and footer at http://tinyurl.com/hnmmf mucho thanks Hi I was wondering why there are aps at the end of navbar: http://www.wnv2.com/v9.php . Here's the css, view source for html CSS: Code: /*** CSS Document
(C) WNV2.com . Feel free to use this file; give me an email, I'd like to see who this code is benfiting
***/
body {
margin: 0;
padding: 0;
background: #65b240 url(bg.jpg) repeat-x;
font: 11px Verdana, Arial, Helvetica, sans-serif;
color:#385e26;
}
a, A:visited {
font-weight:bold;
}
a:hover{
color:#593;
}
/*------------Content CSS----------*/
.hometop{
background-image:url(home_300_bg.gif);
font-weight: bold;
text-align:center;
}
.home_sidetop{
background-image:url(home_150_bg.gif);
font-weight: bold;
text-align:center;
}
input, select, textarea {
font: 11px Verdana, Arial, Helvetica, sans-serif;
border: 1px solid #CCC;
}
/*---------- Divs ------------*/
#switchstyle {
text-align:left;
}
#switchstyle .lite, #switchstyle .lite a {
width: 17px;
height: 16px;
background-image: url(switch.gif);
}
#switchstyle .lite a:hover {
width: 17px;
height: 16px;
background-image: url(lite.gif);
}
#switchstyle .green, #switchstyle .green a {
width: 17px;
height: 16px;
background-image: url(switch.gif);
}
#switchstyle .green a:hover{
width: 17px;
height: 16px;
background-image: url(green.gif);
}
#wrapper {
margin:auto;
padding: 0px;
width: 600px;
}
#header {
margin: 0px;
padding: 0px;
width: 600px;
height: 85px;
background-image:url(top.jpg);
}
#navigation {
margin: 0 auto;
padding: 0px 50px;
width: 500px;
height: 25px;
text-align:center;
}
#navigation ul {
margin: 0px;
padding: 0px;
height:25px;
list-style-type: none;
background-color:#ddd;
}
#navigation li {
display: inline;
padding: 5px 7px;
}
#navigation li a {
color:#385E26;
font-weight:bold;
height: 25px;
text-decoration:none;
background-color:#ddd;
}
#navigation li a:hover {
color:#593;
font-weight:bold;
height: 25px;
text-decoration:underline;
}
#navigation .left_nav {
float: left;
width: 22px;
height: 25px;
background-image:url(nav_left.jpg);
}
#navigation .right_nav {
float: right;
width: 22px;
height: 25px;
background-image:url(nav_right.jpg);
}
#middle{
background-image:url(middle.jpg);
background-repeat: repeat-y;
width:600px;
}
#navigation .spacer {
width: 5px;
height: 5px;
display: block;
background-image:url(nav_spacer.gif);
}
#contentswrapper {
margin: 0px;
padding: 5px 55px;
text-align: left;
width: 490px;
}
#bottom {
height:90px;
width:600px;
background-image:url(bottom.jpg);
}
/*---------- Tutorials ------------*/
.b-tut-tlb {
border-top: 1px dotted #593;
border-left: 1px dotted #593;
}
.b-tut-trb {
border-right: 1px dotted #593;
border-top: 1px dotted #593;
text-align: left;
}
.row_one {
background-color: #DEDEDE;
}
.row_one a:hover {
background-color: #FFF;
}
.row_two {
background-color: #EEE;
}
.row_two a:hover {
background-color: #FFF;
}
Hey there, webbsdomain.com/Max I am working on a landing page for a client and I am a bit stuck. All XHTML and CSS validates, no issues there.... The design looks and works great in ALL browsers other than IE6. The issue is with the 3 colored divisions, secondLeft, secondMiddle, and secondRight. In IE6 there is a HUGE amount of white space left between the div's with no reason that I can find. I researched the issue online and found similar issues: IE6 3px float bug and IE6 double margin bug Neither of which seem to be the issue, and the fixes they describe do not work. I am completely at a loss on this one, and any guidance anyone can offer would be VERY useful! Thanks in advance, Brian I've been trying to make this layout for about 5 hours now and i'm about to give up and just use tables. The problem is that everytime i make it work in firefox, it ****s up in IE. I was able to fix the gaps in firefox by using a negative margin but no luck in IE. I figure i'm not the first person to experience this so i searched for solutiosn but all i got was solutions for the list problems. I would really appreciate any help CSS(it contains my various attempts at fixing it) Code:
#container
{
width:806px;
min-height:610px;
border-color: #666666;
border-style: solid;
border-width:3px;
z-index: 1;
margin: 0pt;
padding: 0pt;
}
#left
{
min-height:586px;
width:130px;
padding-right: 0pt;
margin-left: 0pt;
border:none;
float:left;
display: inline;
}
#menu
{
background-color: #eeeeee;
width:130px;
height:85px;
vertical-align: top;
display: none;
}
#logo
{
width:673px;
height:73px;
position: relative;
background-color:#ffffff;
display: block;
float:right;
}
#top_bar
{
width:673px;
height:50px;
background-color: #666666;
position:relative;
boder-width:0px;
display: inline;
float:right;
vertical-align: top;
}
#divider
{
width:673px;
height:24px;
background-image: url("images/divider.jpg");
background-repeat: repeat-x;
position: relative;
margin-left:-5px;
float:right;
}
#content
{
width:668px;
min-height:300px;
float:right;
}
#bot_bar
{
width:668px;
height:24px;
background-image: url("images/bbarbg.jpg");
float:right;
display: block;
}
#body_bg
{
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: -1;
}
html code(everythin inside body) Code: <body background="images/bg.jpg" bgcolor="#FFFFFF" style="background-repeat: repeat-x"> <div id="container"> <div id="left"> <img src="images/main_02.jpg" width="130" height="125" alt=""> <div id="menu"><img src="images/main_09.jpg" width="130" height="20" alt="" vspace="0"><img src="images/main_10.jpg" width="130" height="21" alt=""vspace="0"><img src="images/main_12.jpg" width="130" height="23" alt=""vspace="0"><img src="images/main_13.jpg" width="130" height="21" alt=""vspace="0"><img src="images/main_14.jpg" width="130" height="20" alt=""vspace="0"></div> <img src="images/main_15.jpg" width="130" height="35" alt="" onclick="tongle()"> </div> <div id="top_bar"></div> <div id="logo"> <img src="images/main_06.jpg" width="668" height="73" alt=""> </div> <div id="divider"> </div> <div id="content"> ds <p>ds</p> <p>s</p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div> <div id="bot_bar">dasdsad</div> </div> </body> sorry for the newbie question. i have the following style #container {background-color:#CCCCCC; border:1px solid black; width:80%; height:80%; margin:10px auto;} #subcont1 { background-color:#6699CC; border-bottom-width:thin; border-bottom-style:dotted; border-color:#333333; width:50%; margin-left:100px; padding:1em; margin-top:30px; } then i use <div id="container"> <div id="subcont1">some text goes here</div> <div id="subcont1">some text goes here</div> <div id="subcont1"> more text ...</div> </div> when it displays, i see gaps between the subcont1 (s). also, how can i make sure that border-bottom length is 3/4 of the total length ? thanks for the help Hi, I looked on your forum trying to find the answer it may be I don't know the correct term. If so, please forgive me. I am trying to do some changes to my site and I have existing tables and wanted to put in a background color in a td. The code in question is about 14 lines of code down. Here is the new look and feel page http://www.test222.whsites.net/home.php Look at the left hand column near the top you will see the word "SEARCH" bordered in green. There is a 2-3 pixel gap between the end of the border around SEARCH and the border around the navigation bar. That is what I want to get rid of. Can anyone give me some direction as to why that is doing that. I want to do that on all the headings if I can get rid of the gap. Also, the code below has gaps where other tables are located. Due to space considertations I shortened the code. Thanks, Randal Just look for the CSS categoryborder - Here is my code: Code: <table width="150" class="tableborder" bgcolor="#FFFFFF" >
<tr>
<td width="148">
</td>
</tr>
******************* This is my problem ********************
<tr bordercolor="#99CC99">
<td valign="top" class="categoryborder"><center>
SEARCH
</center></td>
</tr>
*********************************************************
<tr bordercolor="#99CC99">
<td valign="top"> <table width="147" border=0 align="center">
<TR>
<Td width="146" align=center>
<FORM METHOD=GET ACTION="/isearch2/index.php/">
<table border=0>
<TR><td>
<input maxLength="255" name=s size=10 value="">
<input type=submit value="Go">
<input type="hidden" name="action" value="search"> </td> </TR>
</TABLE>
</FORM>
</Td>
</TR>
</TABLE></td>
</tr><tr>
<td valign="top" bordercolor="#006633" border="1" bgcolor="#FFFF99"><center>
<span class="temp_body_bold">CLEANSING</SPAN>
</center></td>
</tr>
<tr>
<td valign="top"><div align="left">
</div></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFF99"><center>
<span class="temp_body_bold">BUSINESS OPPORTUNITIES</SPAN>
</center></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF">
<div align="left">
</div></td>
</tr>
<tr>
<td bgcolor="#FFFF99"> <center>
<span class="temp_body_bold">100% ESSENTIAL OILS</span>
</center></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFF99"><center>
<span class="temp_body_bold">FREE NEWSLETTER</SPAN>
</center></td>
</tr>
<tr>
<td valign="top"><center>
<span class="temp_body_bold"><b>Health
Tip & Weekly Specials</b></span>
</center>
<form name="" method="post" action="http://www.thefrugallife.com/12all/box.php">
</form>
</td>
</tr>
<tr>
<td bgcolor="#FFFF99"><center>
<span class="temp_body_bold">WEIGHT LOSS </SPAN>
</center></td><tr><td valign="top">
<div align="left">
</div></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFF99"><center>
<span class="temp_body_bold">SPIRITUAL HEALTH</SPAN>
</center></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF"><center>
<div align="left">
</div>
</center></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFF99"><center>
<span class="temp_body_bold">FOR YOU </SPAN>
</center></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFF99" ><center>
<span class="temp_body_bold">PETS</span>
</center></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF" ><center>
<div align="left">
</div>
</center> </td>
</tr>
<tr>
<td bgcolor="#FFFF99"> <center>
<span class="temp_body_bold">VISIT OUR OTHER SITES </span>
</center></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFF99"><center>
<span class="temp_body_bold">SHOP</span>
</center></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" align="center">
<span class="temp_body_bold"><a href="http://www.theherbsplace.com/Online_Catalog_sp_59.html">Online
Catalog</a></span>
</td>
</tr>
</table>
Here is the CSS code: Code:
.categoryborder {
position: relative;
left: 10px;
background-color:#FFFF99;
padding:0px;
font-family: "Arial";
font-size: 11px;
color: #000000;
font-weight: bold;
}
.tableborder {
border: 1px solid #006633;
padding:0px;
}
The usual story - looks fine in FF, big gap in IE between the second and third elements. I've tried lots of different positioning methods that again look fine in FF but have similar spacing problems in IE. I've also looked at lots of similar questions on forums but none of the fixes seem to apply. Take a look (in IE of course) and perhaps you have some insight: hire.karenjeane.com/web/site4.php hire.karenjeane.com/web/style4.css Thanks muchly for the help! |
|||||||