I'm having some problems with IE compatibility with my website. I currently have it parked at http://www.verdasconews.com/tiago while I test everything. I like to make sure I have compatibility with the major browsers. It looks fine in Firefox, Chrome, Opera & Safari, but in IE, I'm having problems with the header/content div layers.
Here's a screenshot of what it looks like in IE
http://i.stack.imgur.com/GOaSX.png
The post and sidebar content are overlapping the header when they should be tucked underneath, the way it appears in the other browsers.
This is the css for the positioning:
/* ------ layout ------------------------ */
wrapper {
background:url(img/back2.png) no-repeat center top;
}
contents {
width:959px;
margin:0 auto;
text-align:left;
}
header {
background:url(img/top.png) no-repeat bottom;
height:160px;
}
middle-contents {
background:url(img/side.png) repeat-y;
padding-bottom:50px;
}
left-col {
float:left;
display:inline;
width:584px;
margin:0 0 0 5px;
}
right-col {
float:right;
display:inline;
width:330px;
margin:15px 5px 0 0;
}
footer {
background:url(img/bottom.png) no-repeat top;
height:114px;
margin-bottom:50px;
}
and this is what my header positioning is
/* ------ header ---------------------- */
logo_image {
margin:6px 0 0 4px;
float:left;
display:inline;
}
logo_image h1 {
margin:0;
padding:0;
}
Not sure if the title is exactly right, as I asked a friend who thought that might've been the problem and a google search led me here. I'm not a pro with programming, but I'm hoping someone who is can sort out what might be wrong here. I can provide the full css if necessary. Thank you in advance
You can fix it by removing height:160 from #header, and also remove float:left and display:inline from #logo_image
Related
I'm trying to figure out why images seem to jumble around in IE versus Chrome.
Alas, its an ancient public school CMS (we're talking early 00's), and I'm certainly no programmer, rather just a hobbyist trying to juggle the CSS and HTML.
I hope I can get a few pointers. I assume Its about floating the right DIV containers, to get it to render right. The entire thing litteralky exploded when I went to create the overlay text.
CSS can be seen below. Page source can be viewed outside of the CMS frame-template here.
Cheers, Trin
#persongalleri
{
margin-left:5px;
overflow:hidden;
}
img.person /* til personalesiden */
{
width:80px;
height:auto;
border:1px solid #000;
}
div.personwrap
{
float:left;
position:relative;
margin:2px;
}
div.undertekstkasse
{
position:absolute;
bottom:1px;
left:0px;
width:100%;
background-color:black;
font-family: 'Verdana, Arial, Helvetica';
font-size:14px;
font-weight:bold;
color:white;
opacity:0.6;
filter:alpha(opacity=60);
}
p.undertekst
{
padding:6px;
margin:0px;
text-align:center;
}
Its very difficult to spot but all the photos are slightly different heights, so you are getting this strange looking behavour when you float them. If you put a fixed height on the .personwrap then this will solve your layout issues.
div.personwrap {
height: 105px;
margin: 2px;
position: relative;
float:left;
}
You could also remove the float, and just add display: inline-block
I have a strange CSS issue, I'm not quite sure how to fix this.
When I press the "Sign In" button on my website and I start to type in the Username, the header goes up. I really don't know what is causing this.
Any ideas?
Thanks!
Here is some code:
The form:
.tooltip-wrap {
position: fixed;
display:none;
}
.tooltip-wrap .corner {
position:relative;
z-index:100;
margin-left:-5px;
width:0;
height:0;
border:5px solid transparent;
border-bottom-color:#fff;
}
.tooltip-text {
float:left;
margin-left:-50%;
padding:1em 15px;
background:#fff;
color:#333;
}
This is the part that goes up:
.header-navigation.back {
z-index:-1;
position:absolute;
margin-left:0;
margin-top:-6px;
border:none;
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('xhttp://frenchegg.com/images/backmenu.png');
}
You need to click on Username and start typing something.
Very strange bug, and I can't explain what's going on. But it is related to your div.header-navigation.back. If you remove that, the behaviour disappears.
As far as I can tell, you are only using that element for your background image, so it's not a good idea to include it in the markup anyway. If you amend your .site-header you can achieve the same effect without the extra div:
.site-header {
background: #0894ff url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat;
background: url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat,
linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
}
I couldn't quite work out what you're trying to achieve with your gradient, but the idea would be to provide multiple backgrounds for those browsers that support them, with a fallback to a solid colour.
Change the line-height of the input box - fixes the issue.
HTML to change:
<input type="text" id="text-user" name="user_login" value="Username" style="
line-height: 15px;
">
CSS:
#text-user{
line-height: 15px;
}
The reason is because the line-height of the input was much smaller without text, than it was with text. So when you typed something into the box, the line-height expanded which is what caused the header to be pushed up.
Edit
I see you're having no luck with the code, so do these two more things and you're sure to be up and running - it's working here for me.
Remove the following from .site-header:
padding: 2em 0;
Next, change the row style to look like this:
.row{
margin: 0 auto;
padding: 0 30px;
width: 1171px;
height: 137px;
}
I think the solution is along these lines:
Set .header-wrap to have overflow:visible (well, remove overflow hidden!) - this will mean you have to slice those character graphics to have flat bottoms.
Then, change .tooltip-wrap to be position:absolute;z-index:2; (not fixed).
I also noticed that you have the placeholder polyfill in your head. This means you could use that attribute on the input rather than value; like so:
<input type="text" name="user_login" placeholder="Username">
Very cute site!
You could give it a z-index instead of a fixed position, and give it an absolute position.
I'm hoping someone could help me out! I'm trying to achieve the desired effect seen on this wordpress template from themeforest (http://themeforest.net/item/lespaul-retina-responsive-wordpress-theme/full_screen_preview/4083224 -- scroll right down to the bottom).
Basically having a pixel divider repeat across the page, and have text embedded on the left side. I've tried SOOO many different CSS codes and html... It should be an easy thing to do but I just can't seem to get it.
The closest I've gotten a to achieve this effect is the horizontal divider with Text under it...
/////////////////////////////
TEXT(but centered)
but I would like to have
TEXT ///////////////////////////
Here's my code!
div.divider17a {
height:5px; width:100%; border:0; background:url(images/divider17.png) repeat-x;
margin:35px 0 25px;
padding:0;
text-align:left;
float:left;
width:100%;
}
div.divider_notext {
margin:50px 0 20px;
}
div.divider_left1 {
text-align:left;
}
HTML
<div class="divider17a divider_left1"><h3>Strategic Planning</h3></div>
Any help would be much appreciated... Thanks =D
Is there a reason you're not just using the same styling they use anyway?
<h3 class="widget-heading separator-heading">
<span class="text-holder">Companies that trust us</span>
</h3>
.separator-heading {
background-image: url(../img/separator-heading-diagonal.png);
background-repeat: repeat-x;
background-position: 0 50%;
}
.separator-heading .text-holder {
display: inline-block;
padding: 0 .6em 0 0;
background-color: white;
}
Can you provide a link to your page and subsequent code? Also if you look at their code this is what they are doing:
.separator-heading, hr.diagonal {
background-image: url(../img/separator-heading-diagonal.png);
background-repeat: repeat-x;
background-position: 0 50%;
}
If you have to use text you can use the following CSS style:
.divider17a h3:after{
content:"//////////////////////////////////////";
overflow:hidden;
}
and add the following to you container:
div.divider17a{
overflow:hidden;
white-space:nowrap;
}
Demo: http://jsfiddle.net/kyBaN/1/
Alternatively, use a background image.
I've built a site using the contempt theme (wordpress) and I'm changing it's CSS to make it wider.
The problem is that I can make it look great on either Internet Explorer or Firefox and chrome but not all 3 at the same time.
If I remove the sidebar tag:
#sidebar {
width:200px;
padding:20px 200px 10px;
}
the page looks OK on IE (as it now - physiocall.co.il) but the sidebar is hidden in Firefox and chrome.
If I add this little tag to the css -
The site looks great on Firefox and chrome (the sidebar pushed left to it's place)
but on IE it goes down - below the entire page.
Any ideas how can I change the css to make it look correct on both IE and Firefox.
Any ideas what cause FF and Chrome to render the css in one way, and IE in another way ?
Thanks.
the entire CSS:
#content {
float:right;
width:649px;
margin:-50px 30px 0;
padding:0 0 20px 45px;
}
#topbar {
max-width:950px;
height:25px;
line-height:23px;
background:#FFFFE6;
overflow:hidden;
border-bottom:1px black solid;
margin:0;
}
#pagebar {
background:url('images/blue_flower/pagebar.jpg');
width:950px;
height:35px;
border-bottom:1px black solid;
margin:0;
padding:0;
}
#pagebar .children li,#pagebar .sub-menu li {
min-width:105px;
border-left:1px #e1e1e1 solid;
border-bottom:1px #e1e1e1 solid;
margin:0;
padding:0;
}
#pagebar ul a {
background-color:#f1f1f1;
width:101px;
}
#page {
width:950px;
}
#sidebar {
width:200px;
padding:20px 200px 10px;
}
sorry to say that, but you should start from scratch and completly rearrange your html output and css. maybe this is a coding practice due to rtl but your #content appears before the sidebar and has a float:right while your sidebar is positioned left to the content with a margin-left:530px.
and your content has a 640 width..
that can't work out and is not to be fixed by some niffty css trick.
sorry.
Since it works in IE but not the modern browsers, this tells me you used IE as your initial test. Never, ever do that. IE is 12 years behind all others in modern standards and compliance. Inept at best, you should never trust IE to do anything right.
It's been a long time since I've used frames so I'm not sure that the lack of a doctype on your index page, which puts you into quirks mode, is causing the problems.
So, while reworking your markup, use any browser but IE for the initial test. Then look to see how IE screws it up. The quirks and bugs in IE are well known, as are the hacks to fix it.
The solution was
#sidebar {
float:left;
width:200px;
margin:-20px 10px 5px 5px;
}
It looks like IE and FF had the opposite default value to the float parameter, hence making it impossible to set it straight. once given a float value, the margin fixed the rest for both browsers.
The css is exactly like this:
body {
background:#FFFFFF none repeat scroll 0;
margin:2px 5px;
font-family:Arial,sans-serif;
font-size:10pt;
}
But from firebug I see the style is:
body {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF none repeat scroll 0 50%;
font-family:Arial,sans-serif;
font-size:10pt;
margin:2px 5px;
}
Why does firefox add those un-needed styles? How can I get rid of them?
It is added by the rendering engine for its own use, so you cannot get rid of them.
See this question for details.
It is not adding anything for me. Are you sure these are not default styles saved in your default user stylesheet?