Bizarre indentation - html

I have this JSFiddle
http://jsfiddle.net/ThYBS/
and when I run it on the JSFiddle site everything is displaying fine, but when I display it on my local machine there is a random indentation before the left word.
The word part where it should be where I can't find any issues is with the
#menu ul {}
but I can't seem to find anything.
I have no idea why, can you guys check on your side too? and let me know if you know a reason?
Thanks!
Regards
Matthew

I ran into this problem as well - the default browser behavior seems to be to indent items within a <menu> tag. Removing the padding with {padding: 0px;} or using a CSS reset/CSS normalize should do it.

Adjusting the UL's Padding to 0 helped.

Related

16px space at the beginning of website

really strange problem. I got a very basic layout (You can see it here: https://geardev.de/test/test.html), but there is a 16px space above the logo that shouldn't be there.
I have absolutely no idea what would cause this. For your reference: https://geardev.de/test/style.css is the stylesheet, the definitions begin at line 350, before it's only resetting stuff with Normalize.css.
Dismounting the HTML didn't really lead to a result - maybe I'm just missing something stupid. The only thing I noticed was that removing the Doctype is solving the problem - But then it's technically wrong. Btw, it's passing the W3C validator: http://validator.w3.org/check?uri=https%3A%2F%2Fgeardev.de%2Ftest%2Ftest.html
Do you have any ideas?
Well if you use a web dev tool, you will see that the ul element has a 16px margin on top of it. You set that to zero, you should be good to go.
This will fix it:
<ul style="margin-top: 0px;">

internet explorer is showing a pink strip

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;}

Navigation bar displaying different on Mac versus my PC

I am working on my first website, and one of my concerns at the moment is my navigation bar. It should display across from my name in the middle, however, it displays lower than my name every time I check the Macs at school. Someone said it could be the padding in my navigation causing the error? I've tried a few different things but I'm still having this problem.
I'm at a lost as to what the problem could be! I'd like to understand more how the website could work correctly on the pc's I've checked but not Macs. I'm slowly but surely learning all this, so any help is appreciated.
My site is
www.nmariephoto.com
In addition to declaring a left margin on the UL with #dd, you should zero out the other margins. The browser adds a "before" and "after" margin of 1em which is causing your problem.
So on line 134 of PortfolioStyles.css, change
margin-left: 12%;
to
margin: 0 0 0 12%;
i suggest you to use of reset.css to avoid such issues it will reset all your style of every element, if you don't know then pls google it you will get lots of site from where you can find it. thanks

IE9 link hover css color change vertical shift

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.

Problems solving oddly acting labels in ie7

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?
:)