I have a relative positioned div inside another div. The inside-div is positioned with percentage (left: 0%; top:13%).
My problem is that in all IE versions the div is displayed some pixels further down than where it is displayed in Chrome, or FF...
Anybody recognize this?
<div class="nav_container" id="nav_container">
<div id="nav_container2" style="position: relative; left: 0%; top: 13%;"></div>
</div>
Also, I am just about to browser adjust my website so some article about most common problems with IE is appreciated.
Thanks
UPDATE:
Here is the style for the primary div.
.nav_container {
background-image: url(../Graphics/menu_lvl1.gif);
height: 101px;
width: 720px;
}
My guess is IE is rendering the padding/margins differently than Chrome/Firefox (which is usually the issue with layout bugs).
You're best off to specify both padding and margin when position matters, otherwise you're leaving it up to the browser defaults (which are all different).
You should also make sure your page isn't being loaded into Quirks Mode by IE. Be absolutely sure that you have the proper DOCTYPE definition at the top of your page to force IE to load into standards mode. W3Schools has a good rundown of where and how to use it:
W3Schools - HTML doctype declaration
And then the W3C has a list of all the valid declarations:
W3C QA - Recommended list of Doctype declarations you can use in your Web document
If none of those take care of it, you can create IE version specific CSS and load them using Conditional Comments. That will allow you to specify different values for top based for IE.
#Camran
Here you go bro I hope this helps you out. http://www.positioniseverything.net/articles/cc-plus.html Everything is fully detailed and easy to follow along. Trust me I was having that same issue and what kills me is everyone I talked to who claimed they were professionals kept stating that it's an impossibility to have perfect positioning, yet here's somebody who came up with a solution.
Make sure IE isn't running in quirks mode. This happens when you have any text before the doctype declaration. If its in quirks mode it behaves hideously for CSS. Well moreso than normal.
Use conditional comments to target IE and change top accordingly.
IMO, that's the ONE thing you need to know to resolve IE issues.
Are you using a css reset? (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) It'll help you make sure all your browsers are starting with the same default padding and margin.
Try a reset stylesheet, and see if that helps. Include it before any other CSS declarations.
Related
I am trying to split my Bootstrap page into three parts - header.php, (page).php, footer.php and I am having trouble with an automatic insertion of a margin-top inline style on load. This isn't in my actual code and I can't find it in the style sheets.
The page looks perfectly fine prior to the split ( http://tinker.help/New_Site/index.html ).
When I split it into components header_th.php ; index.php ; footer_th.php ( http://tinker.help/New_Site/index_splitwrong.html ) the elements all come in and load, but I now have a large white space between the bottom of the index.php content and the beginning of footer_th.php content. If I look at the code in Web Developer tools, there is an inline style being set for the margin-top on the Footer element as follows: footer id="footer" class="dark" style="margin-top: 509.2px;
Clearly, this is coming from something calculated as no-one would set such an odd margin manually and it will disappear if I set the inline style to footer id="footer" class="dark" style="display: inline;" to disable any top or bottom margins (although it hoses all of the other formatting to do that.) I can't override this using footer id="footer" class="dark" style="margin-top: 0px !important;" in my code. Changing it in the Web developer tools fixes it but it is overridden by this automatically generated code and it doesn't stick if I update my code.
I assume I have messed up the divs somehow in the split, although I used the Web developer tools to make sure I was getting all of the code pieces cut from the consolidated index.html page and to ensure I didn't duplicate or miss and open or close div bits in the split pages.
Any advice? I am new to straight Bootstrap HTML5/CSS/PHP programming and have never tried to split the header and footer manually like this.
Thanks in advance.
OK, I somehow messed up my splits. When I started from blank pages, it worked fine. It's also possible that I was loading my js libraries twice as the template loaded them in the head section and I was moving them to the end and may have duplicated them. Thanks all.
If you like to override that margin-top, you can add !important to your CSS value like this:
#footer{
margin-top: 0px !important;
}
But make sure that you add this in your CSS style file or within a new <style> block in that page.
Regarding the automatic margin insertion, probably it's done by one of your Javascript code. Have a look at it!
Here's the fiddle: https://jsfiddle.net/8y6vw1gr/
I am building a website for some local business and I can't figure out what is causing the side scrolling. I must have been really tired and messed up somewhere. Any and all help would be wonderful. The link to the site is http://theparkwayrv.com
If you look, you'll see that there is a side scrolling bar. Please let me know if you can figure it out. I've gone over it like 10+ times and i'm losing my mind right now.
Thanks!
Add
body {overflow-x: hidden;}
to your CSS.
Generally, this is due to having items with width or min-width set to 100% or 100vw in your page. When the browser adds a vertical scrollbar to it (17px in Chrome), it makes it 100% + 17px, hence the need to add a horizontal scroll. This, however, doesn't happen on most mobile UI's and any browser that uses semi-transparent-show-on-scroll-only scrollbars.
As very well spotted by Tersosauros, the only one who, instead of providing a quickfix, like the rest of us, actually took the time to look for the real cause of your bodys extra width, in your particular case, this is due to using Bootstrap classes incorrectly. You used .row independently, without being a direct child of .container and the page is wider with 30px.
However, the quickfix still solves it. At least in this life, we're mostly payed for solutions, not for being right. Right? :)
This issue is being caused by the 15px left and right margins on .row (line #7, bootstrap.min.css) affecting the child div within the parkway_about_page div. This is part of how Bootstrap expects your page to be structured, as pointed out by #Andrei Gheorghiu . If parkway_about_page were also a .container bootstrap would fix this for you.
Either option fixed it for me:
Add (as the many other 1-line answers with no explanations have suggested) overflow-x: hidden; to #parkway_about_page.
--- OR ---
Remove the margin(s) from the .row div underneath parkway_about_page, (or just remove the class entirely).
Use this css to your body section:
body{overflow-x: hidden;}
Try this...
body {
overflow-x:hidden;
}
add this to your css file :
body{
overflow-x: hidden;
}
in body just put overflow-x: hidden
Can anyone please tell me how to give a scrollbar to the div? In my program, I am listing my Facebook friends inside a div. I have given fixed height to the div. I will paste the code.
<div id="main_fb">
<div id="friend_list">
// friendlist code.......
</div>
</div>
And the css is :
#main_fb {
height:250px;
}
#friend_list {
overflow-y:scroll;
height:224px;
width:100%;
overflow:none;
}
Is there any wrong in my code? Please give me a solution. Thanks in advance.
I think that there is a chance that the second overflow is overriding the first overflow-y in your CSS. Because you already specified width as 100% of the page, I would personally simplify things by just using overflow:scroll; and forget about the overflow-y property.
Related SOF question: Scrollbar in div scroll instead of page scrollbar
You have overflow-y: scroll and then overflow:none, I think they are conflicting somehow.
For webkit on touch devices there is the vendor specific -webkit-overflow-scrolling: touch; but it is only supported on recent versions.
For more info see here: How much support is there for -webkit-overflow-scrolling:touch
I had a same issue bro. refer to this if you are stuck with similar situation. In my case I ultimately learned that, scrolling is ignored in android 2.3.x versions I don't know what's your target device, but still might be helpful, I guess.
Here's an image:
The HTML is in a php which is as follows:
print "<p class = 'Back'>Epic Fail</p>";
print "<p>You forgot to put in your Username or Password.</p>";
The CSS for the Back class and p is as follows:
p.Back
{
font-size: 200px;
display: block;
text-align: left;
font-style: oblique;
}
p
{
font-size: 20px;
color: #292421;
font-family: Times;
}
This is all wrapped in a div tag that has around 25px padding, why is there so much white space? It's a problem because it creates a scroll bar which I don't want and it doesn't look very good.
EDIT:
Here's the div:
#login
{
background: #E0DFDB;
width: 1200px;
margin: auto;
}
I'm using the latest version of Google Chrome (Sorry for not specifying)
The scroll bar is successfully removed by taking away the padding from the login div and the line-height. However, there is still the white space and I have thoroughly ran through all of my code to see if I've added anything to the p tag but I couldn't find anything. Is there a site where I can upload all of my code to show you guys?
RESULT:
Thanks guys, I decided to use the web dev tool that came with google chrome and IT TURNS OUT: THE MARGIN BY DEFAULT SOMEHOW GOT SET TO 200PX??!! so all I had to do was just set the margin for p to auto
This happens because, by default, Chrome applies a style of -webkit-margin-before: 1em; -webkit-margin-after: 1em to p elements. In your example, this would create a 200px margin above and below the element. Setting margin: auto or any other margin value overrides this default.
Other browsers apply a default margin to p elements in different ways: e.g. Firefox applies margin: 1em 0 which results in the same effect.
The margin does not appear on jsfiddle because they employ a reset stylesheet which gives p elements margin: 0.
I've created a JSFiddle version of the code you've posted -- see http://jsfiddle.net/RukbS/
In my JSFiddle, I can't see the massive empty space beneath the "Epic Fail" which is in your screenshot, so I guess there's something in the code you're running which you haven't shown us.
Without seeing your code actually in action, it's hard to know what the difference is between it and the version I've created, but looking at the screenshot, it looks very much as if the "Epic Fail" paragraph has run over two lines.
The only way I could get my test to replicate this was by putting <br><br> immediately after the word "Fail". I'm assuming you're not doing that.
You might want to consider dropping the line-height attribute from the stylesheet. It isn't really achieving much (as it will pick up that size anyway due to the font size), and is the sort of thing that might be causing what you're seeing. If you really do want a bit of extra space around the text, use padding or margin instead; it's easier to control than line-height.
You didn't state which browser you're using that shows this effect. It is possible that you're seeing something that only shows up in certain browsers. Most browsers these days come with a good debugging tool which can help isolate issues like this. In Firefox, you'll need to install the Firebug plugin; in most other modern browsers, the Developer Tools feature is built in.
Open the Firebug/Dev Tools window, and use it to find the "Epic Fail" element. It will allows you to examine the size and shape of the element, and what styles are being applied to it. This will almost certainly give you the information you need to work out what the problem is.
I know I haven't given you an answer that directly solves the problem, but I hope some of the things I've pointed out here will lead you in the right direction to finding the problem.
Not sure what you are trying to accomplish, but the combination of
padding on the div and
extra line-height
might be causing the excess.
Right now, your adding
50px from padding (25px on top and bottom)
50px from line-height (which is 50px more than the font-size)
I tried your current code in a fiddle and it seems to work fine (drag the bar to the left to see the entire screen)
http://jsfiddle.net/jasongennaro/aNRhN/
Perhaps there is other code being inserted with the PHP?
Or you have other styles applied to the p.
seem to have a inconsistent problem with one of my pages.
In some IE browsers it displays nearly a whole screen of blank white space between the header and the main content, strangely enough on my pc using both firefox and ie the page displays correctly however on some other pc's it shows the blank space.
http://kiwiradio.blakjak.net/wxradar.php
Would really appreciate some help with this please
Ok, I downloaded and installed Microsoft Expression 3 Superpreview so that I could see the page opened in both IE6 and IE8 side by side which made finding the culprit script easy.
It turned out to be the CSS script that comes with the slideshow script that was causing the display problems, with it removed everything appears to be displaying as I want it to now with ealier versions of IE.
Thanks for your help.
<style type="text/css">
/* All Styles Optional */
* {
font-family:arial;
font-size:10pt;
}
div#show3 {
background-color:#efefef;
width:140px;
margin:0 auto;
border:1px solid #444444;
}
div#show3 table td, div#show4 table td {
height:24px;
background-image:url('38.gif');
}
div#show4 table td {
background-image:url('40.gif');
}
div#show3 table input, div#show4 table input {
outline-style:none;
}
</style>
<!--[if IE]>
<style type="text/css">
div#show3 table td, div#show4 table td {
height:21px;
}
</style>
<![endif]-->
I viewed the URL: http://kiwiradio.blakjak.net/wxradar.php, in IE 8.0, It is perfect, there is no space. In case if you get issues. There are few things may go wrong here.
You place two DIV's side by side and the width of the parent div is fixed size which is less than the total size of the two divs placed side by side. In this case the second div moves down and if the height of the first div is set to fill the whole page, you can see it blank.
The header DIV/Table's height is mistakenly set to fill the height of the page and the content is not filling the whole DIV/Table etc.
Find out which browser makes the problem and see the url:
http://www.quirksmode.org/css/contents.html
for any compatibility issues.
I dont think setting margin and padding will help as you say the space is for the whole page.
It's clearly your sidebar. I removed it and the problem went away. Try narrowing down further until you find the culprit.
Use IE tester to dramatically help with testing:
http://www.my-debugbar.com/wiki/IETester/HomePage
Good Luck
In case you have not found what the problem is - the problem is with your "Rain Radar and Maps" heading - you use tag which is not widely used because the tag istelf is badly designed. If you don't want to change this, the fastest and easiest solution is to add height for the "Rain Radar and Maps" center tag.
Do you use UTF-8 with BOM? I used it some times ago and I got a similar problem.
If so, change the coding to UTF-8 without BOM.
some people set by default:
* {padding:0px;margin:0px;}
at least it helps to set everything yourself.
CSS Solution:
* { padding: 0; margin: 0; }