|
CSS - Strange Behavior Of My Interface When Testing On Safari
Hello to all,
I have a problem of compatibility when using Safari (V3). I have a strange interface and i can't identify the problem. When I refresh my page,I don't have the same css !!!! The same interface is testing wit hFirefox and IE and it's ok. Can you help me please. Thank you in advance for your time. Similar TutorialsHi. I have noticed a strange behavior with my CSS and I cannot figure out a way to fix it. I have some css to override the body tag style. It sets the font family and size. I need to do this. However, when I use the font-size in the body, it adds extra pixels to a set of span tags that I use. (see attached picture). Here is my code. Does anyone know how I can include the font-size in the body, but not have that extra space in my div tags? Note: the sample image contains images on the edge of the tabs, but their presence has no effect on the issue. Also, this is for IE 6 on Windows. Thanks, Dave Code:
<html>
<head>
<style>
body
{
font-family: Tahoma,Verdana,Arial,sans-serif;
font-size:11px; /* with this line, extra space appears */
}
.tab_off
{
height:17px;
overflow:hidden;
cursor:hand;
}
.tab_off_text
{
background:#ACA899;
height:15px;
font-size:10px;
border-top:1px solid #aaaaaa;
border-bottom:1px solid #ECECEC;
padding-left:4px;
padding-right:4px;
vertical-align:middle;
}
.tabbed_panel
{
background:#ECE9D8;
border-left:1px solid #666666;
border-bottom:1px solid #666666;
border-right:1px solid #666666;
width:400px;
height:400px;
}
</style>
</head>
<body>
<div id="pnlTabs">
<span class="tab_off">
<span class="tab_off_text">Tab One</span>
</span>
</div>
<div id="pnlContent" class="tabbed_panel"></div>
</body>
</html>
I'm currently working on the CSS template for a new client and running into a strange issue. The design calls for a separation bar of repeated background to resemble a negative strip (site is a portfolio piece for a commercial photographer), and below that the continuation of a gradation. For some reason, however, in Mozilla-based browsers a gap (visually as if it was a top margin) is appearing in the background repeat (gradation) in the pageblock. To see it, visit http://www.spearsphotography.com/test_index.html in Firefox or another Moz browser. The strange thing is... I noticed the contained news items were not being pushed down (that is to say, it wasn't a margin issue). I tried changing the CSS definition of the background image position on the div, etc. Finally to see exactly where the browser was drawing the div, I set a 1px green border on #pageblock. Oddly enough it fixed it! (weird, huh?) This is especially strange since the float: right; div with the splash image -is- affected by the mysterious "margin". You can see that by going to http://www.spearsphotography.com/test_index2.html. (Contains an inline style to add the border to #pageblock The css file is at http://www.spearsphotography.com/css/style.css I just don't get it. This was all coming together so quickly from the Photoshop mockups, and now a brick wall that is driving me mad. Well strange on IE 5.2 for mac (I am assuming others are ficked too) I have a div in which I want to put paragraphs in... Code:
<html>
<head>
<style type="text/css">
#midRight {
position:relative;
top:20px;
left:160px;
width:550px;
padding:0px;
margin:0px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="midRight">
<p>line1</p>
<p>line2</p>
<p>line3</p>
<p>line4</p>
<p>line5</p>
</div>
</body>
</html>
Everything works fine on firefox (as one would expect) but on IE the first paragraph displays fine (at the left edge of the DIV) but all the rest indent themselves to the right by 160px (or whatever I change the left:xx px; of the div to. This is bizzare! I cant work out why the first one would be fine but all the rest indented. Anybody know how I can fix this? (so IE looks like this) Code:
line 1
line2
line3
line4
line5
etc Hi. I have a nav bar on my site which I created using Suckerfish Dropdowns. my <UL>-s id is "nav". Everything is working when I hide secong level list by Css: Code: ul ul{display:none;}
But when I change it to (so as to not hide all second level lists) Code: ul#nav ul{display:none;}
, the browser still hides the list, but didn't show it on hover! : Code: li:hover ul, li.sfhover ul{
display: block;
}
This behaviour seems very strange for me. Can anyone explain me that? The address of the page is http://www.dinal.ru/new/ Thank you. Artashes I have a very strange quirk going on with my development site right now. It's being developed locally so I can't provide a link to test with. However, I can describe the exact behavior. When any browser is maximized, everything looks great. If you size the browser, dragging any corner in any direction, again, the site looks great. However if you hit the restore down button on any browser, the following occurs: (Example) Browser max is 1900 x 1080. Browser 'restore down' is 1024x768. When hitting restore down the site looks fine at first glance. However, if you drag the horizontal scroll bar down at the bottom of the browser to the right, a large white gap appears in place of the header, the menu, the body, the footer where the background should be. (On the links below you will need to add an h t t p : / / to see the image issues I'm having. For some reason, I can't post any and it's really the only way I can show how this issue is occurring. Here is what it looks like before dragging horizontal bar: img21.imageshack.us/img21/2602/beforedrag.jpg Here is the strange gap pictu img31.imageshack.us/img31/6199/strangegap.jpg Again, if I grab the corner of the browser itself and drag diagonally and resize, the background fills and stretches exactly the way it should. Anyone have an idea of what might be causing it? I'm using a div container as a wrapper: div#container { text-align: center; margin: 0 auto; } Header contains a flash file. Menu contains: background-image: url(/images/menu-background.gif); background-repeat: repeat-x; My main nav content is in a smaller container: #nav-main { position:inherit; white-space:nowrap; width:913px!important; font-family:helvetica, sans-serif; margin: auto auto!important; } Any ideas for what I need to do to fix this? Many thanks. Hello, I am having an issue with some background images. Ive finally decided on a method to create my rounded corners. I am using three divs, a top bottom and center content div. The top and bottom divs have a background image for the top and bottom portions of the curved box. The center div contains the content and a background image repeating along the x-axis. Problem is, the image repeating stops just shy of the top and bottom images. Is there a way to solve this? When I place a border around the center div, the repeating image portion suddenly fills in the gaps, which I don't quite understand. Here is a link to a development area where I am displaying the problem: http://www.ioforge.com/ezt-example/index.html I have a big div container. In this container, I put my content - mostly text. I have a nested div in this container that floats a "sidebar" to the upper-left corner of the container. The sidebar is set up to allow text in the container to fill in around the bottom half of the side bar if the sidebar is shorter than the length of the container. My problem occurs when I have an unordered list as part of my content. If I have an unordered list sitting to the right of the sidebar, the bullets of the list sit immidiately on the right the left of the sidebar (with no indenting). Below the sidebar, all bulleted lists starts indenting from the left of the container, as expected. One solution would be to put my content in it's own div, that would be completely separate from the sidebar div. However, if I do this, my content won't fill in around the bottom of my sidebar. Any advice? Thanks! - Ryan Hi there. I have a blank space that appears as a link when my animated T-R MENU button is clicked. Click here to view the problem It didn't do this in the last version of FF... I can't see why it's doing it, there aren't blank spaces in the code to make it behave this way. Opera, Safari and IE view it fine. Just FF3 that's doing it. Can anyone shed some light on why it's doing this or how to fix it? Thanks in advance. I haven't seen this one before. And I can't for the life of me figure out what could be causing this. Take a look at This Page To see what I'm talking about, you'll need to view it in a good browser first (Mozilla, Netscape, Opera) Then look in IE. Basically there's an H3 that also serves as a link to my RSS Feed page. You don't see it in IE unless you actually hover the mouse over it. Even then, if you move the mouse over the menu on the left, the heading disapears again. At first I thought it could be because it was a heading, but on another page a regular link does it too. I've got two stylesheets, and it does it on both. Any thoughts or suggestions? Here's the main stylesheet This pertains to the "last nail in the coffin" so to speak in cross-browser compatability with the template for this site. The template is at http://www.spearsphotography.com/test_index.html The effect in question is on paragraph tags in the news item elements under the pagebody id div. (e.g., #pageblock div.story p ). Essentially, in every browser -except- IE Windows, the line spacing is as intended by the design. In IE6Win (haven't tested 5, but assume same) the lines are too-tight. Can anyone see the problem here, or has experienced this before? CSS File is at: http://www.spearsphotography.com/css/style.css Thanks. Hi all, I'm building my first experimental CSS site, and I'm trying to attain accessibility for the widest array of users. While testing various browser settings, I came across this issue. (I'm looking at the site in IE, as I'm at work. I'll be able to look it over in other browsers when I get home.) When my site is viewed with text set to "Medium," everything appears fine: http://www.flickr.com/photos/251449...in/photostream/ When my site is viewed with text set to "Larger," the text in the middle left section doesn't fit: http://www.flickr.com/photos/251449...in/photostream/ Fair enough. But here's what has me stumped: when the site is viewed with the text set to "Largest," it fits again: http://www.flickr.com/photos/25144998@N00/4997174984/ I've learned alot very quickly in the last week or so, but this really has me over a barrel. Any ideas? CSS Code: body
{
background-color: #393939;
font-family: sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
}
.header
{
text-align: right;
font-weight: bold;
font-size: 1.6em;
}
.clickables
{
text-align: right;
font-weight: bold;
font-size: 0.95em;
}
.content
{
text-align: right;
font-size: .8em;
}
.navbutton
{
float: right;
width: 5em;
background-color: #ffcc00;
color: #666666;
height: 1em;
text-align: right;
font-weight: bold;
font-size: 0.95em;
margin: .75em 0.2em .75em 0em;
}
#mother
{
margin-left: auto;
margin-right: auto;
min-width: 720px;
max-width: 1000px;
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
width:expression(document.body.clientWidth < 500? "500px": "auto" );
}
#UpperLeftWrapper
{
float: left;
width: 35%;
background-color: #7d7d7d;
}
#UpperLeft
{
height: 8em;
margin: 0;
background-color: #7d7d7d;
}
#UpperRightWrapper
{
float: right;
width: 65%;
background-color: #666666;
}
#UpperRight
{
float: right;
width: 7em;
height: 7em;
margin: 0;
padding: .5em;
background-color: #666666;
color: #ffcc00;
}
#MiddleLeftWrapper
{
float: left;
width: 35%;
background-color: #ffd426;
}
#MiddleLeft
{
float: right;
width: 8em;
height: 1.2em;
color: #7d7d7d;
background-color: #ffd426;
margin: 0;
padding: 0.6em;
}
#MiddleRightWrapper
{
float: left;
width: 65%;
background-color: #ffcc00;
}
#MiddleRight
{
float: right;
width: 24.85em;
height: 2.45em;
background-color: #ffcc00;
margin: 0em .6em 0em 0em;
}
#LowerLeftWrapper
{
float: left;
width: 35%;
background-color: #e5e5e5;
}
#LowerLeft
{
float: right;
width: 5.8em;
height: 75em;
color: #7d7d7d;
background-color: #e5e5e5;
padding: 0.7em;
}
#LowerRightWrapper
{
float: left;
width: 65%;
background-color: #ffffff;
}
#LowerRight
{
float: right;
height: 88em;
color: #666666;
background-color: #ffffff;
padding: 0.8em 1.1em 2em 2em;
}
HTML Code: <!DOCTYPE html> <HTML> <HEAD> <META CHARSET="UTF-8"> <title>layout three</title> <link rel="stylesheet" type="text/css" href="comp.css" /> </HEAD> <BODY> <div id="mother"> <div id="UpperLeftWrapper"> <div id="UpperLeft" class="header"> </div> </div> <div id="UpperRightWrapper"> <div id="UpperRight" class="header"> <p>demonstration<br>layout<br>number two</p> </div> </div> <div id="MiddleLeftWrapper"> <div id="MiddleLeft"> <div class="clickables"> <p>additional reading</p> </div> </div> </div> <div id="MiddleRightWrapper"> <div id="MiddleRight"> <div class="navbutton"> <p>tab one</p> </div> <div class="navbutton"> <p>tab two</p> </div> <div class="navbutton"> <p>tab three</p> </div> <div class="navbutton"> <p>tab four</p> </div> <div class="navbutton"> <p>tab five</p> </div> </div> </div> <div id="LowerLeftWrapper"> <div id="LowerLeft" class="clickables"> <p> first link<br> second link<br> third link<br> fourth link<br> fifth link<br> sixth link<br> seventh link<br> eighth link<br> </p> </div> </div> <div id="LowerRightWrapper"> <div id="LowerRight" class="content"> <p> Body content here... </p> </div> </div> </div> </BODY> </HTML> Thanks in advance for any advice! Hello there. I'm afraid I can't provide a live example because it's a complicated commission that hasn't yet been published, but I'll try to be as specific and detailed as possible. My overall aim: To have a squarish div on the left hand side and a few short rectangular divs vertically stacked on the right hand side of a container. The container is a div whose width is known. The stacked rectangles must have a minimum width but there is some margin for error. All these divs are separated by margins. Code: OOOO === OOOO OOOO === OOOO OOOO === There are other, unrelated blocks above and below this arrangement, and there are blocks nested within these divs as well, all unrelated though. So how did I implement this? I figured this was simple enough: Code: <div> ... <div class="left-square">...</div> <div class="right-short-rectangle">...</div> <div class="right-short-rectangle">...</div> <div class="right-short-rectangle">...</div> ... </div> And the CSS would then look something like this: Code:
.left-square {
width: 100px;
height: ...px;
float: left;
}
.right-short-rectangle {
margin-left: 110px;
margin-bottom: 5px;
height: ...px;
}
So, this works just fine in Firefox and Internet Explorer. However, for some reason, Chrome doesn't like it. What Chrome does is, it completely ignores the margin on the right-short-rectangles, placing them underneath the floating left-square, but giving them the correct width (the width of the container minus the margin). By fooling around with the DOM inspector, I discovered that if I remove the margin attribute from one of the rectangles, they show correctly (in Chrome). However, they obviously will break in Firefox and Internet Explorer if I do that. Also, if I remove the float attribute from the square, Chrome suddenly recognizes the margins of the rectangles properly (when it no longer matters). So, does anyone have any idea about what's going on here? EDIT: I just noticed this and it is certainly relevant: The right-short-rectangles contain a few *unstyled* divs and one div that is floated to the RIGHT (in other words, content I want to have on the right hand side of each of these rectangles). Without this inner, right-floated div, the margin issue no longer happens in Chrome. The inner div is, however, essential. What can I do? Use tables? Could someone explain me how to get rid of the gap at the bottom of this page? Hi all, (I hope this is the right category for this topic) After validating my CSS and XHTML with the W3C vaildators there seems to be a problem with the interface of my site. All the Header classes and the navigation buttons appear to be much bigger in IE then FF And in IE there are two gaps at the top (one under the main flash and one under the navigation bar. I want the website to look just like it is in FF At the moment I am at a complete loss with this and cant find a soloution. Here is the link to my site http://www.pfwd.org.uk/gta/version3/ Try in both IE and FF and see what you think Thanks in advance. I'm working on a tabbed content Interface to be used at the bottom of some pages in a CMS. Works in FF but only partially in IE (sometimes). The tabbed portion of the interface is set up with CSS and background images. In IE im having trouble getting them to show properly but only on 1 layer. When the Javascript changes the display property of the div it brings up the appropriate background image. But only on 3 of the 4 content divs. The fourth panel "Specs" or the div#panel4{} is displaying ok, except that it will not bring up the image for the div#TopRight4 Here is the code, and a link to a test page so that you can view it in action... any ideas? html4strict Code: Original - html4strict Code <html> <style type="text/css"> <!-- body {margin:0;padding:0;} div#container {position:absolute;left:20px;top:20px;width:631px;} div#panel2, div#panel3, div#panel4 {display:none;} div#panel1 {display:block;} div#panel_style{margin-top:5px;} div.panel_links1{width:131px;float:right;text-align:center;line-height:47px;vertical-align:50%;} div.panel_links2{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links3{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links4{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links a{text-decoration:none;} div.panel_links a:hover{color: gray;text-decoration:underline;} div.panelTopLeft{ background-image:url(images/CP_top_left.gif); width:100%; height:47px; float:left; } div.panelTopRight1{ background-image:url(images/CP_Four_Tab4.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight2{ background-image:url(images/CP_Four_Tab3.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight3{ background-image:url(images/CP_Four_Tab2.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight4{ background-image:url(images/CP_Four_Tab1.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelCenterLeft{ background-image:url(images/CP_center_left.gif); background-repeat:repeat-y; width:100%; float:left; height:100%; } div.panelCenterRight{ background-image:url(images/CP_center_right.gif); background-repeat:repeat-y; background-position:100% 0; width:100%;height:100%; float:right; } div.panelLowLeft{ background-image:url(images/CP_low_left.gif); background-repeat:no-repeat; width:631px; float:left;} div.panelLowRight{ background-image:url(images/CP_low_right.gif); background-repeat:no-repeat; width:6px; height:6px; float:right;} --> </style> <script language="JavaScript" type="text/javascript"><!-- var divArray = new Array('panel1','panel2','panel3','panel4'); function setDisplay(objectID){ for ( var i = 0; i < divArray.length; i++ ) { var d = document.getElementById(divArray[i]); d.style.display = (d.id==objectID)?'block':'none'; } } --></script> </head> <body> <div id="container"> <div id="panel1"> <div class="panelTopLeft"> <div class="panelTopRight1"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4">Options</div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel2"> <div class="panelTopLeft"> <div class="panelTopRight2"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3">Features</div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>More Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel3"> <div class="panelTopLeft"> <div class="panelTopRight3"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2">Swatches</div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Still Some more Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel4"> <div class="panelTopLeft"> <div class="panelTopRight4"> <div class="panel_links1">Specs</div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>And the last bit of Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> </div> </body> <html> Test Page Is there anyway i can test my website on a mac browser (that being safari) without actually having a mac. i.e. can i simulate it as i find some of my users reporting slight hiccups on the layout and i would prefer to be able to test it thoroughly Hi, i want to test my sites against ie 5 but where do i get it? And is it possible to have ie 5 and 6 installed at the same time? Also is there a way to test against Safari for windows users? 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 was wondering if anyone knows of downloadable software for cross-browser testing (other than downloading all browsers manually). I know there are several websites that offer these features, but I'd like downloadable software as well. It would be even better if it offered some emulators for mobile device browsers as well.... Anyways, just wondering if anyone knows of anything good other than the online web service ones. What do you use for Cross Browser Testing? I just came across BrowserCam ($25 per year) at fundable.org. Do you recommend it? thank you. Dr. Mk. |
|||||||