CSS in Safari/Windows *only*, possibly to do with overflow - html

Throughout my site at http://www.chrissansom.net there's a basic layout problem that occurs in Safari/Windows only, not even Safari/Mac - and it's fine in Chrome, Firefox and Opera on both platforms as well as in IE (current versions). It may well be something fundamental I'm doing wrong, but if so all the other browsers are very forgiving!
Inside the <body>, below a header div, there's <div id="contentbox"> with no style attributes at all. Inside that there's <div id="leftmenu"> which is floated left, followed (in the code) by <div id="rightmenu"> which is floated right, followed in turn by <div id="maincontent">, which appears between the two menus. It's styled as follows:
div#maincontent {
margin-left: 200px; /* space for leftmenu */
margin-right: 200px; /* space for rightmenu */
padding: 20px;
overflow: hidden;
/* border: 1px solid green; */
}
(The border is only there for testing.)
In all those other browsers including, I stress, Safari/Mac and Chrome/both (which shares the WebKit code with Safari, no?) it behaves perfectly, but in Safari/Windows div#maincontent acquires an extra right margin of about 400px. The size of this margin remains constant when I resize the window (until the whole thing gets too narrow).
I've found that if I remove the overflow property the extra margin is gone and it looks right, but this interferes with other elements on various pages, which are pushed down below the left menu, so I'm fairly sure I need it.
Any ideas what might be going on here? Am I barking up the wrong tree entirely?

In your case, you can easily solve the problem deleting the margins and setting the position to relative:
div#maincontent {
position:relative;
padding: 20px;
overflow: hidden;
}

Related

Percentage padding difference only in Firefox

I developed different responsive boxes for the news in the website I'm working in. And everything seems to be working fine except for the news inside the slider on the top of the main content. It displays properly in Chrome, Opera and even in Internet Explorer, but not in Firefox. The problem seems to be in the article elements, specifically in the following lines of CSS code:
.home .first-level-post {
margin: 0px;
width: 100%;
padding-top: 45.1613%;
}
It's supposed to have a height of 280px, that's why I chose 45.1613% as its value. The container's width is of 620px, and it's 45.1613% is 280px.
When I switch the padding-top property off, it takes the 93.3333% value which belongs to the article elements present outside the slider (which are 300px wide), displaying as it should, but that value does not work in the other browsers.
I've been dealing with this for a while I can't seem to find a solution.
You can properly check this issue right here.
Thanks in advance, guys :)
Firefox is interpreting your padding based on a height of 0 due to inheriting from your .home article class.
Changing your CSS to this seemed to fix the issue for me in Firefox and not have an adverse effect in Chrome:
.home .first-level-post {
height: 100%;
margin: 0;
padding-top: 45.1613%;
width: 100%;
}

Continue div element past horizontal overflow

A JSFiddle of it: http://jsfiddle.net/24tL8mkq/3/
I want the red highlighting to continue all the way across the box.
Right now, it's set-up such that:
<div style='width: 500px; overflow: auto; border: 1px solid black; padding-top:-5px;'>
<pre id='pre_1'>
<!-- code box -->
</pre>
</div>
with the relevant css (this is the CSS that I want to extend across the entire div, through the overflow) being:
.bad {
background-color: palevioletred;
width: 100%;
}
I get that I can't use width: 100% as that'll only extend to the right most side of the overflow always, but I can't set a static width as I don't know what the size of the box could be.
I'd really prefer to keep this a HTML/CSS solution if possible just to make this as portable as possible.
Interesting problem. The following works for me in the latest Firefox, Chrome and IE11, though I'd consider this somewhat "experimental" - definitely should be further tested if you need to support a broader range of browsers.
http://jsfiddle.net/24tL8mkq/5/
pre {
display: table;
}
pre > div { display: flex; }
I wish I could tell you why this works, but I don't know. I wasn't able to find another combination that works, however. My guess: setting the pre to display: table makes it so the width will go wider than 100% (500px), as tables will do (when their children are wider than the table). Setting flex on the div children is filling the available space since all the children should be equal width.

How can I get things properly contained in a wrapper div?

At cjshayward.com/index_new.html, there is a wrapper div around the body's content, about 1000 pixels wide, and it works as intended for the top 100 or so pixels in Chrome and Firefox. Next down the page is a jQuery UI set of tabs, containing a fixed-width accordion and something close to jQuery.load()ed plain old, simple HTML.
However, on the "Browse the Library" tab (but not "About the Author"), which is presently open and which contains the fixed-width accordion, below 100 or 150px down, the area under the tabs appears to have the same width as the window; it has the correct left margin, and horizontally scrolls an apparently equal distance to the right. Furthermore, the body background tile does not display; the whole width is white, as was specified for the wrapper div's interior.
How can I get the "Browse the Library" tab to display as intended (like the "About the Author" tab does)?
Thanks,
You're absolutely positioning way too much and that's ruining the flow of things. I'll go through a list of edits you can do to make this work.
/*
#accordion and #details will be floated, so we'll need to
clear #tabs. Add this property.
*/
#tabs {
overflow: hidden;
}
/*
Remove the absolute positioning from #accordion, along
with the top and left properties and do this instead.
*/
#accordion {
float: left;
width: 400px; /* This already exists */
margin: 0 10px 0 0;
}
/*
Remove the absolute positioning from #details, along
with the top and left properties and do this instead.
*/
#details {
float: left;
width: 580px;
}
This will get you a lot closer. You should also try to avoid using height on these elements. Let the content dictate the height.
Here is what i ended up with making those edits: http://i.imgur.com/niizuoR.png
Okay lets make a step by step solution (watch for the edits).
Background
Your background is set in the body. So the body needs to be extended to fill the whole page.
I would recommend this way but there are others.
body,html{
height:100%;
}
Normally the body would fit its contents but with position:absolute this mechanism doesnt work anymore.
Also remove background: #fff css (normalize.css) from the html.
html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Also your background scrolls with your content. Set background-atachment: fixed to change this.
Wrapper
Same counts dor your wrapper which holds the white background.
Set its height to 100% too.
div#main {
height: 100%;
}
The reason why your content is bigger than your wrapper is that
<div id="details" style="width: 713px; height: 0px;">
this div holding the content has a fixed size set. Removing that size make it fit the wrapper.
The width seems to be set per javascript in the load event, so I cant help you with that. Provide your .js code and may i can help you with that too.
As stated in the comments, your layout issues are based in your use of absolute positioning rather than flow layout:
I went through your site and quickly switch everything so it was positioned statically (width floats, not absolute values) and this cleared up the issue. There were some other issues as well. You probably need to look over how you are setting up your HTML from the top level on.
I would start out again and concentrate on using floats for your layout, rather than absolute positioning.
For a basic example on doing so, here is a super simply page: http://cdpn.io/kmCFy

Work around webkits misinterpretation of percentage values

View this jsFiddle in a WebKit-based browser like Chrome or Safari and then compare it to what you see when you view it in a non-webkit based browser like Firefox or Internet Explorer.
You will see that they're obviously not the same. Below is Chrome on the left and Firefox on the right:
The reason for this is that the fallowing small CSS markup is interpreted differently by WebKit compared to how every other browser interprets it:
span.upArrow.menu{
margin: 36.1% 0 0 12.5%;
}
More exactly: WebKit interprets 36.1% not as 36.1% of the page width but rather 36.1% of the element width or height.
The reason for using percentages in the first place is because the site scales up and down depending on the scale of the screen. This piece of code is for the menu. So the site as it is now looks fine if you use the default browser on an Android or iPhone. But there's a huge ugly triangle in the middle of the content on a Windows phone or if the user uses Opera or Firefox.
So my question then becomes. Is there any way to work around this bug in WebKit?
If it's possible one could write separate markup for webkit and non-webkit browsers. But perhaps even better would be to find a solution which works in both cases.
Take a look at this fork.
I've changed the approach slightly, setting the menu items to position: relative and positioning your arrows rather than adding a margin to achieve the layout.
Here's the updated CSS (remove the additional div and span from the selectors, they aren't necessary):
.menuButton{
display: inline-block;
width: 32%;
padding: 2% 0;
position: relative;
}
.upArrow.menu{
bottom: 0;
left: 50%;
margin-left: -15px;
}
The negative margin matches the border width of your arrow, ensuring it will always be in the exact centre whatever else happens with your layout.
That is happening because, arrow span doesn't have proper position. make that span position as absolute and the menuButton as position:relative.
div.menuButton{
display: inline-block;
width: 32%;
padding: 2% 0;
position:relative;
}
span.upArrow.menu{
position:absolute;
bottom:0; left:45%
}
DEMO

CSS class display

I am having a CSS class with the following code. I am trying to put a DIV at a distance of 140px from the top of webpage and to put it in the middle (equal distance from left and right). It is displaying correctly in Firefox and Google Chrome but not displaying correctly in Internet Explorer 8. Can anyone tell me what is the problem with this code? Also can anyone give me some link with browser compatibility guide?
div.main
{
padding: 0px;
width: 980px;
/*height:1350px;*/
/*border: 1px solid red;*/
margin: 0 auto; /*helps in getting the DIV to be in middle i.e. equal distance from left and right*/
overflow: hidden;
margin-top:140px;
}
I find QuirksMode most helpful for browser compatibility info, plus it has some other great info.
The problem, however, depends on more than just the CSS. In order to answer your question, we'll need to see some HTML and the rest of the CSS you've got. And a description of what's incorrect with IE's rendering. Without seeing that, my first suggestion is to make sure you're using a strict DOCTYPE.
Note that centering the DIV will only center it in the containing block (probably BODY), which, wichout an explicit width, will only be as wide as the content and not the full width of the window.
margin-top:140px; is "the problem". To reach your aim use:
padding-top instead of margin-top;
if you cann't - make a wrapper div and apply padding-top to it;
or apply position: relative/absolute; top: 140px; to the div. It is suitable
sometimes.