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.
Related
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%;
}
I have been getting an unknown white-space at the bottom of my Service pages. I'm using column-count: 2; to break the images up between two columns.
Update: This is a Webkit browser problem
The problem is the extra space at the bottom of mainCont, left side column.
If the images all line up flush then there is about a 30px of unneeded white-space. Although if the images do not line up flush then there is about a 50-70px of extra white-space. I have a 10px padding on the main containers but I can't find what is creating the extra spacing.
Here is a JSFIDDLE (remove/show in url to view code) to see what the problem is. Also here is the Live Site so you can see how it affects each one of the service pages.
CSS for main container:
.mainCont {
width: 100%;
background: #f7f7f7;
padding: 10px;
position: relative;
margin-top: 2.5%;
}
Edit
There is about 160px of extra space at the bottom minus 20px(mainCont and gridbox img equals 20px in padding).
I have been making research since ysterday.
If image sizes are equal, no problem on all browsers
If image sizes are different, extra space occurs at the bottom of
the page.
This is the bug of chrome browser. There is something wrong with balancing algorithm. They haven't resolved this issue yet. You can see here
I'm really struggling with a layout issue in (all versions of) IE. The site I'm working on works fine in Chrome and Firefox, but the layout of the banner is completely wrong in IE, where it appears a few hundred pixels lower than it should. I'm not sure if this is an issue with negative margins or what, and there's not much testing I can do since I'm using a Mac and only have static screenshots to go by.
I'd really appreciate any feedback on this. I've attached an image of what the IE screenshot looks like, and what it should look like. The link to the site is: http://www.osullivans-pubs.com/draft
EDIT: I'm unsure what code to include really since I can't identify the problem but I'm guessing it has something to do with this element:
#back {
overflow: hidden;
min-height: 700px;
margin-top: -235px;
padding-top: 80px;
background-position: center -44px;
text-align: center;
position: relative;
}
EDIT: I'm attaching an image of the site zoomed out, to give an idea of why negative margins are necessary. It's pretty hard to explain, but it's to do with the diagonal backgrounds and the fact that I need these backgrounds to reach about 1600px (for larger screens, and I can't repeat them, they're diagonal). I wish there were some way to get IE to recognise the negative margins, I've tried the zoom: 1, position: relative technique, but still nothing. Even in IE10.
Using negative margins is a bad idea for primary development and should only be used when there is no other solution.
Personally, I consider negative margins a hack.
Position relative will make an element respond relative to its parent, but if you've moved your element outside of its parent with negative margins you can only expect weird results.
In my experience, IE tries to 2nd guess what you want, whereas Mozilla is more wysisyg. so cross browser compatibility will always be a hinderance to you.
If you want your element to always appear in the same place [ relative to pixel position 0,0 (top left)] then use an absolute positionning on the element and specify top and left. this way you can ignore the parent element.
#back {
overflow: hidden;
min-height: 700px;
background-position: center -44px;
text-align: center;
position:absolute; top:30px; left:20px; margin:0px; padding:0px;
background-color:red;
}
This gets tricky when you want things to reposition themselves based on browser resizing; So be sure to test the absolute positioning in different situations, full screen, resized, min res, wide screen, screen rotation (if using handheld devices).
Turn off padding and margins completely, while positionning with margin:0px; padding:0px;
and change the background color to something to aide you in seeing edges of your element.
hence why ive added a reg BG on the example above.
Once the element is rougly in the right place (+/- 1 pixel) then you can tweak the margins and paddings.
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
I want to make a header like http://www.chacha.com (doesn't move, is about that wide and that height, and able to fit divs inside it and also has to be an image)
I am starting off with a blank html document and a blank css page, so there I haven't currently written any code.
I've been trying two days straight to do this now so I would really appreciate any help anyone can provide.
I have gimp so if anyone could also give me image dimensions for a perfect header and perfect background size I would appreciate it even more.
CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: url(yourimage.png) repeat-x;
}
<!--html -->
<div id="header"></div>
That should give you a starting place, I can't tell you more without seeing exactly what the layout's supposed to be.
The CSS property you're looking for is position: fixed which will position the element relative to the viewport. This is good breakdown of positioning: https://developer.mozilla.org/en-US/docs/CSS/position
In this specific case, what you've got is an element with styles roughly along these lines:
#header_id {
position: fixed;
width: 100%;
height: 35px;
}
You don't have to set the height, but unless there is content in the fixed element, it will collapse if there is no height specified. They also appear to have put a drop-shadow on the element toget the neat floating effect.
If you want to have an image inside, you can just put the <img> inside the header element, or use it as the background-image url in the CSS and position it with background-position (see also: https://developer.mozilla.org/en-US/docs/CSS/background-position although the compatability table at the bottom is important if you want to do anything too specific with this property).
You can do this with any block-level element (or any element with display:block set on it). In your example they are using the HTML5 <header> tag; a <div> would work, too, if <header> wasn't appropriate for your page.
I would recommend using the Firebug addon with Firefox (or similar developer consoles with other modern browsers) -- you can right click on an element on the page and select 'Inspect element' from the dropdown menu and get a breakdown of both the markup and styling to see how other websites are constructed. Very useful for when you're browsing the internet and you see something and think, 'that's a neat trick, how does it work?'
FOR FULL WIDTH FIXED HEADER
header {
width:100%;
background:green;
height:60px;
margin:-8px;
position:fixed;
}
FOR NONFULL WIDTH FIXED HEADER
Create a div and set width and height (you can also set it left or right by float:left, float:right)
then in this div put the code above but without margin:-8px; and change the width to the width that your div has.
Here is a test