Having major issues getting my wordpress website to display correctly in IE6.
Link to screenshot below. My background image is missing, the nav is knocked down a few extra pixels, and most of my content is off center.
www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ie6_wpterra.jpg
FF screenshot (linked below) is what it should look like. Have tried in Safari, a couple versions of Firefox, and IE7, and all look just the way that they are supposed to. IE6 is the only one giving me trouble.
www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ff_wpterra.jpg
Any ideas??
Link: www.genevarealtytrust.com/content
I've validated my code, and have tried a few things, but no success.
Help! Appreciate it!
You can try using conditional styles. In document's head section paste:
<!--[if lte IE 6]>
<link rel="stylesheet" media="screen,projection" href=www.example.com/ie.css" type="text/css" />
<![endif]-->
Now You can start editing ie.css without worrying about spoiling design for other browser.
Extra space around nav: IE sometimes has default margins/paddings different from other browsers. Try defining
#something {
margin: 0;
padding: 0;
}
explicitly in Your new css.
No background: Maybe it's the alignment. Try adding somethig like "top left" to Your background-image definition. Example:
background-image: url('../img/site-bg.jpg') no-repeat scroll top right;
Content centering: In CSS there are two ways to center content. First: setting the parent element text-align property to center;. Second: Defining width and setting margin to top-bottom-margin-value auto;. Example:
#something {
width: 100px;
margin: 10px auto;
}
I hope this will help solve any of Your problems :)
This isn't really an answer to your question (and since I don't have enough rep to comment :) ), but try running through this list of common IE CSS bugs. It's helped me work out some kinks in my CSS, but IE 6 is a warzone. Otherwise, I'd really suggest getting the fantastic book Bulletproof Web Design.
Thanks for the tips guys! Daveslab, I'll definitely keep that list handy, and thanks for the book recommendation.
Centering Issue/Missing Background Image:
I made the alternate css doc and that gave me more room to experiment - I was able to resolve the missing background image and centering issue by simplifying the CSS a bit for the problematic section by trial and error. (removed float, position...)
Extra pixels:
What finally ended up fixing the 3 pixels on the bottom of my header was... just stupid.
Evidently IE6 was applying an extra 3 pixels to the bottom of the header image because my html code for that div was split into 3 lines...
<div id="header">
<img src="url" />
</div>
I just had to combine them all into one line, and the extra padding on the bottom disappeared. Dumb... (and ugly)
<div id="header"><img src="url" /></div>
I still have an extra pixel on the right side that I'm trying to resolve - still investigating.
Related
I'm having a hard time figuring out how to make my footer stick to the bottom of the screen, even when the page is smaller than the screen.
www.test-domain.sk
I'm guessing it's something to do with the container length, but I'm honestly completely unsure.
Any help would be appreciated. :)
This concept is something known as a sticky footer. The Mozilla Developer Network has a page here illustrating a few ways to accomplish it. In the example of your www.test-domain.sk page, I believe you can add the following css to make your footer stick to the bottom of the viewport (screen).
html {min-height:100%)
body {100vh}
div#page {min-height:100vh; display:grid; grid-template-rows: auto 1fr auto}
Assuming you are looking for something like this, but if not, be more specific. As in post the code you already have.
footer {
position: fixed;
bottom: 0;
}
I've been working on this site http://minta.jvsoftware.com/ and I have a problem in FF/Linux, everything looks fine but the search button is showing at the bottom of the search box, I assume it's because the spacing of the elements in the top bar are too wide and since they're all floated to the left it jumps to the bottom for lack of space.
The problem is I can't debug properly since I don't have a linux distro available for testing (I used browsershots) so I was wondering if anyone on linux could point me in the right direction, I'm almost sure that if I reduce the right margin on the address it'll fix but I'm not sure by how much.
Thanks in advance!
The best way to make a horizontal menu that has a minimum of cross-browser hassles is to use the following pattern:
<div class="menu">
<ul>
<li>SOME TITLE</li>
<li>link1</li>
<li>2</li>
<li><input type="text" .../></li>
<li><input type="submit" class="submit" value="Submit"></li>
</ul>
</div>
CSS:
.menu ul, .menu li {
list-style=type:none;
padding:0;
margin:0
}
.menu li {
display:inline-block
}
.menu a {
display:block;
....other styles....
}
You started off this way in your menu for the store hours, then half-way you went to DIVs.
If you continue this pattern using <li> to wrap each item in your menu you'll find that things will work out fine.
Well the main issue was that I wasn't setting the text input's width in the css so the browser was rendering it with the default settings making it too large, but will definitely keep in mind Diodeus solution on using li instead of p tags for this kind of stuff.
I'm trying to wrap my head around CSS positioning guidelines. I'm trying to figure out how to make a sticky footer but have it stop being sticky when the main content area can no longer be condensed. An example of what I'm talking about can be found here http://ryanfait.com/sticky-footer/. Can someone explain to me why the footer stops being sticky and particularly what CSS properties cause this to occur? For me, as I look at the CSS it looks like the footer should just stay sticky to the bottom of the browser window always, but this isn't the case here. Why?
Thanks for the help.
Give this one a try.
http://www.cssstickyfooter.com/ (link no longer valid)
It is similar to Ryan's one but, from memory, I think I've had better luck with this (although both are very similar).
You have to declare the footer outside of the wrapper and give some height for footer and margin-top should -(footer-height)px
<div id="wrapper">
---
------
</div>
<div id="footer">
</div>
# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}
Here's a brief summary of a layout I use fairly consistently as a basis for projects that require a sticky footer. Not sure where I initially got all the code from but it was pieced together over quite a while.
http://jsfiddle.net/biznuge/thbuf/8/
You should be able to see from the fiddle that you require a '#container' element which will wrap the whole of the page. this gives you 100% height (note the hacks for ie present in the css), and allows and child elements of this 'container' element to derive a height, or position relative to it.
Pitfalls of this method are:
You need to provide some padding/margin at the bottom of the '#main'
element so that the footer is displaced further than it naturally
would, so need to know at least a broad range of what your footer
height should be.
IE doesn't seem (<=IE8 not tested 9) to recognize browser resize
events if you only resize the bottom edge of the browser, so in
that particular case the stickiness would fail, until a horizontal
resize was also presented as an event.
if you want a fixed width to the layout you should place this
constraint not on the '#container' element, but on the '#page'
element, and perhaps introduce extra elements beneath '#footer' to
provide any width constraints there.
Good Luck!
I have div containing multiple divs and text. The inner divs are alternately floated left and right and the text flows along side them in all browsers (including IE8) except for IE7. In IE7 the text is pushed to the bottom so that it is aligned with the top of the final inner div. I have tried all sorts of solutions and have read a good article on the subject
However, I'm still unable to prevent the text from being cleared in IE7. Here's the relavent HTML (please note this div is nested within an HTML table with a specified width as it is a legacy site. I have tried pulling the div out of the table, but the same behaviour occurs anyway):
<div>
<div class="left"></div>
<div class="right"></div>
Text goes here
<br />
Text goes here
</div>
And CSS:
.left { float:left; }
.right { float: right;}
I have tried applying display:inline, display: inline-block, clear: none, overflow: hidden, specifying widths, position: relative to the containing div, various hacks such as IE7 conditional with zoom: 1, min-width: 1% - basically hours of pulling my hair out and dredging Google for answers but I haven't found anything that works. Has anyone encountered this problem before and got a fix for it?
(for testing i am running IE8 in compatability mode in Vista)
I am sure of the headaches that IE7 brings. Thank God that it is much better than IE6, but it was a headache for me in many situations.
In this case I recommend that you generate IE7 specific code using tables!
Alright, here is a link to the site I am working on. http://danberinger.com/preview.html
I currently have the message inside its own div(#messagebox) and the picture in its own div (#picture). Both of these divs are floated to the left. I put them inside a container div called #intro_container. I would like to center this containing div, but am having trouble with it. I have tried setting the margins to 0 and auto but that did not work. This must be some sort of issue with the amount of different levels of divs that I am trying to work with....
Any help would be greatly appreciated!
Set a width on your #intro_container container, otherwise margin: 0 auto; won't work.
For 0 auto to work, you must specify a width.
You can put everything within a container div, with something like width 900px margin 0 auto, or you can simply apply these styles to intro container.
Right now your css is scaling everything to the viewport width, so float left sends the pictures to the width of intro_container, which has no defined width.
Also note, you can apply your id directly to the image! no need to wrap that in a div. It is good practice to style elements semantically.
sometimes it's good to center things like that:
<html>
<head>
</head>
<body>
<div style="position:relative;width:400px;height:400px;background-color:green">
<div style="position:absolute;margin-left:50%; left: -100px; width:200px;height:200px; background-color:red">
here attribute 'left' is half of this container width
</div>
</div>
</body>
</html>
always working