I am working on the site http://childrensdentalland.com/ and it is a wordpress site. When viewed from all the browser except IE ,the site is showing ok but when We views through IE it shows a pink strip under the
"Welcome To Phoenix Pediatric Dental Specialists".
Can anyone help me to correct this problem.
Thanks
Somdeb
hmm could have something to do with float. your navDiv has no float which can break things in browsers.
Check your margins and heights as well. make them set and that may as well fix the problem
Try adding this to your class. I did this in Firefox just to see what happened. But anyways. I think it is because it needs to have float:left; . I don't have IE with dev tools so I am sort of taking a shot in the dark.
.footshadow {
float:left;
margin-top:13px; /*this will have to be tweaked*/
}
You have some weird absolute positioning going on there.
What you should be doing instead is floating .menu-header left, #searchpedi right, and then clearing both on .navshadow. Remove all position: absolute and use float instead.
Hi it very simple you just define one properties in you css file .navshadow{top:221px;}
as like this
.navshadow {top:221px;}
Related
First of all, I've been searching for an answer in Google and forums, but didn't find, sorry if it has been asked before and if you can link me to an answer it would be great.
Here's my problem: I have a web calculator made of a table with buttons inside. Here's a link. If you open it with IE it will be all messed up, so don't. I'll work on it later. On FF the rowspaned buttons do not stretch up and down to cover the hole cell, on Chrome it looks as intended. How do I make it look good on FF too? thx in advance to responders.
Using a <table> for layout is a bad idea for numerous reasons that don't need to be re-hashed here. What matters for you is that FireFox displays tables differently than other browsers and you are going to have a hard time laying out your buttons as you want them with that approach.
Instead, just ditch the table and absolutely position the buttons, or float them.
Edit: A floated layout works nicely:
http://jsfiddle.net/gilly3/7rL97/5/
JSFiddle's frame messes up the display if you view it in chrome, but if you view it in chrome outside of the frame, you can see it works fine in chrome as well: http://fiddle.jshell.net/gilly3/7rL97/5/show/
#yekhezkel gilly3 is probably right. but i found solution to your problem. It works in firefox and chrome. I have not tested in IE.
step1: add a class of fix to all the td's containing rowspan=2. It should look something like this.
<td rowspan="2" class="fix">
<button onclick="modifyInout('+')">+</button>
</td>
Step2: add the following css for fix class
.fix {
height: 70px; /* double the value of td height you specified earlier */
}
Let me know if it helps.
Here is the jsFiddle: (open in firefox or other browser to test it.)
Regards :)
Read this and try to add padding
padding: 18px 6px;
Padding will stretch your button
my friend was helping me make a new design for my website but has since gotten a full time job. Web Design is not my strong suit and I can't get it to work across all browsers!
So right now, my website looks good in Chrome and Safari. But is broken in FireFox
http://dl.dropbox.com/u/22866203/sb%202/speedbump.html
http://dl.dropbox.com/u/22866203/sb%202/speedbump.css
I was researching/trying different CSS Resets to fix this problem (Meyers Reset) but this only seemed to break the page in Chrome and Safari as well.
Any suggestions would be much appreciated!
If you started without a reset then a reset is not going to help. You particular problem is that you're not clearing your floats. To solve it do this:
#social-media, hr { clear: both; }
Btw, you have a 404 error on an image and many other warnings. Check firebug or devtools.
As I was messing a bit with your site with firebug, I noticed that if you add to some divs the property float: left it arranges the site to look like it does in chrome.
Download FireBug for firefox (great tool) and arrange the floating divs exactly how you want them to be.
Hope it helps.
Give the #wrapper overflow:hidden and remove margin top from previous and after divs.
The problem is that you have floated elements in the body text (left) and the green box (right) but the parent isn't floated, meaning that the floated elements will not affects it's overall height. Also, don't use hr, instead, use borders.
http://dl.dropbox.com/u/33811812/stackoverflow/speedbump/Speedbump.html
The paths are now relative to my folder and you'll need to change them back.
IDs need to be unique(#wrapper) I see four ( 4 ) instances of it from the image above.
Use a class instead as it can be re-used.
.wrapper:after{
visibility: hidden;
height:0;
display: block;
clear:both;
*zoom:1;
content: '.';
}
IE 9 on Hover over a link, pushes some of the HTML down the page.
When i remove the color from
td.subarea > h2 > a:hover { color: #aa051a; text-decoration: none;}
the problem does not occur.
I can't paste all the code here, and fairly sure its a unique problem to this page.
But maybe someone out there has seen something similar.
Its not moving the Link(a tag) down the page, its the whole containing table that moves.
This problem seems to occur in IE9 when the container element is set to overflow: auto and there is some hover action taking place in the child element.
There is a very simple solution of adding min-height: 0px to the container element, which works.
The detailed explanation of the bug and this solution can be found in this link:
http://blog.brianrichards.net/post/6721471926/ie9-hover-bug-workaround
Make sure your line-height and font-size properties are the same for normal and hover.
Sort of found the problem, well makes the table stop moving. margin-top:-20px.
Although it olny shifted down about 10px.
Probably some IE9 rendering issue. IE7/8 actually move the table on intial loading.
The font sizes, line-heights, all that css, is all good for the link.
Marc B is probably close to the issue of IE rendering something wrong and cauing floats and such to mess up.
Now have to real style a table layout wihtin a table layout page(ugh, hate table layout).
For me I had to specify
height:100%;
Then I had to go ahead and specify
width:100%;
The 'min-height: 0px' by mohitp above got me on the right track.
i know IE6 is dead,but in china, there are lots of people still using it. so expect someone can do me a favor about this problem.
this is the page.the even line's background color is not the same length, under IE6, which is shorter
the display under IE6. (http://run.xxmn.com/ie6.jpg). the bgcolor displays different from other browers.
the display under IE7,FF,CHROME (http://run.xxmn.com/ie7.jpg). it displays ok.
how to make it under IE6 displays the same result as other browers?
ps:the problem is solved. thanks all the guys.
The problem in IE6 is probably due to negative margins on the views-field-title class (though I don't have IE6 installed to check).
You don't actually need negative margins to achieve the effect you want. So suggest removing them like this:
Remove margin-left: -4px; from #left_cplist .cplist-bg .view-content .views-field-title
Remove margin-left: 5px; form #left_cplist .cplist-bg .views-row
Okay so this is sort of a double question so I'll split it into two.
First part
In modern browsers the main bold labels sit above their corresponding form elements, and align to the left as is expected. However in ie7, they randomly site 10-15px inset. I went through the developer tools and could find nothing to fix it. I've made sure all my margins and padding is reset so I don't really understand =S
Here's the page demo - link
Maybe some of you ie bug fixing genius's know what the problem is? =D
Second part
Again with labels, this time the in-line ones resident next to the check boxes and radio buttons. In modern browsers again, the side beside the form elements as expected, but not so in ie7 where they take a new line. I've tried floating, changing margins and everything but to no effect in sitting it in-line with the div.checker or div.radio that is created by the uniform Jquery plugin.
Here's the page demo - link
Sorry for troubling you with my ie7 problems, I know they arent the most fun to solve. Hopefully someone has the patience to help.
Matt
Part 1:
ol,ul{
list-style-type:circle; list-style-position:inside;
}
If you change that to this:
ol,ul{
list-style-type:circle;
}
Or just remove the definition entirely, that seems to do it for me.
I think that's a reasonable thing to do, as I don't see anything actually using the bullet lists.
Edit for Part 2:
IE doesn't like this:
input{
background:#FFFFFF url(../images/input_bg.png) repeat-x;
border:1px solid #CCCCCC;
margin-bottom:20px;
-moz-border-radius:3px;
padding:7px;
-webkit-border-radius:2px;
}
If you remove the margin-bottom:20px; from that, your radio button won't be messed up.
Sorry I'm not really providing IE7 specific solutions, but at least you've got the spots that need fixing.
here's a point to where the problem lies
http://www.alistapart.com/articles/beyonddoctype
here's some points about doctype right here in SO
Which doctype do you use when writing webpages?
:)