i have a blog and i have placed a form in right but it shows different result in different browser.
The Link named "Subcribe in a reader" should be in center but it shows in left in Safari and Opera but IN FF and Ie7 Shows Perfectly in center.
And The border is 5-6 pixel going up in Opera and Safari but in FF & IE 7 it shows Perfectly fine. And In Ie6 it shows border line 10-12 pixel downside ... strange
i m using this code to adjust for postioning..
please help....
my blog : ww.techieinspire.blogspot.com
check image here
http://techie2inspire.googlepages.com/csspositioningproblem.JPG
Your markup is seriously jacked up. Use Firebug on Firefox to look at it. Here's a couple things I noticed:
You have your elements for your subscribe link inside the form above it. This is not apart of your newsletter form, so shouldn't be contained inside that form.
Your using a lot of <span>s with block elements inside them. <span>s are generally for inline content and sticking block elements (like <p>) inside could give weird results.
Check your stylesheets where your setting the left padding for ".newsletter p" this is affecting your subscription link.
Try to avoid specifying styles inline (using the style attribute).
Stop using postion:relative everywhere. Instead using padding and margins for layout your sidebar.
Generally to center something, you can do this:
.centered_thing {
margin: 0 auto;
text-align: center;
}
Edit: The marquee thing is terrible. Read about what happened to the HTML marquee tag. There's many good reasons to avoid it or Javascript knockoffs.
Related
I have padding: 0 40px 0 40px on the main element of each page.
In chrome, the layout looks correct with the correct padding. Here the image shows the correct padding using the developer tools.
http://imgur.com/BButZht,TuOHanN
However in IE and safari, the padding is not present and the text/image are shifted to the outer body element.
http://imgur.com/BButZht,TuOHanN#1
I cant figure out why this is happening. The IE developer tools don't help me much either
Same padding issues for the home page and category pages.
www.luminoto.com
Thanks
IE does not have display:block in its browser stylesheet for the main element, so you have to add it explicitly in your stylesheet – otherwise it’ll just be treated as an inline element (and all the content will just “flow out” of it).
You can add it directly to your formatting for .photo_main – although the better place to do this would be inside a “reset” stylesheet meant to equalize such browser differences.
Not sure if that’s the same issue Safari is facing, but give it a try and see if it fixes that as well.
I'm going nuts on this, I can't figure out what causes the margins of the right sidebar gallery images to be rendered differently on opera browser. More specifically the bottom margin of the images seems to be doubled in every other common browser, its set to 2px and only opera displays it as 2 px.
This is the url - http://www.roxopolis.de/media See screenshots here.
Please help me out with this, I don't care too much about the fact that its displayed differently but it exposes a bit of the following gallery images which are supposed to remain hidden so thats what bothers me. If there is another way to hide the following images (which are placed by widget) that'd be fine too. Maybe setting the margin conditionally for opera?
I've had a quick look at the page in Dragonfly as well as Chrome's inspector for comparison and no particular style, including inherited ones, strikes me as "causing" this issue. Maybe someone else can find something, but at a glance, I'd say Opera seems to be "doing the right thing".
You might have more control over the spacing if you put each anchor tag along with its respective image inside its own container and tried to style those (e.g. a div containing the anchor containing the image for each item, and float them left within the parent container div).
Is there a particular reason you have more images than you want to display? I don't see any controls to scroll the images on that page, so I'm not sure why you need to have more than the six images you're showing already. Surely if you have code somewhere that randomises the order, you can change it so that it only displays the first six images.
Also, have you tried breaking the problem down to a smaller use case that can be tested/tweaked in a jsfiddle? That may help to get to the bottom of your issue if you can't solve it using the above suggestion.
I have a HTML 5 drag and drop game that doesn't work in IE so I want to basically just show the answers in the form of an image. At the moment I'm using CSS to hide the game div in IE and display a div with using display: block; to show the image and hide it using display: none on browsers like Chrome.
Is this an ok way of switching content based on browser or is there another method I should be looking at? What is the correct way to do this?
The only draggable elements in IE are the <a> and <img> elements.
Some people just wrap their (text) content with <a> tags that go nowhere, as is seen in Remy Sharp's demo: http://html5demos.com/drag. This works just fine in IE9, and probably older versions of IE.
So the "correct" way to handle IE is to use those elements.
In my first attempt at a responsive web design I have run into a curious problem. When I resize my browser down to 615px width or less, a horizontal scroll bar appears. I'm not sure what element is causing this. I tried putting a border around each element using
* {
border:1px solid #FFF;
}
to help me visualize where the edges of the elements were but I don't see any borders extending beyond the window boundaries.
Can someone take a look at my site and give me some insight? http://www.ritualbliss.ca
Thanks!
Edit: So I only get the scroll bar in Firefox. Chrome works fine and the desktop version of Safari but on my iPhone it scrolls horizontally.
Edit: the site is for a legitimate massage business but some may consider the picture NSFW
Devin,
Try using a tool like Firebug for Firefox, IE Developer Tools, or the Chrome Developer tools. I'm sure Safari and Opera have similar tools, as well. These things will give you the ability to highlight and view the various properties of every visible HTML element on the page, including Javascript and CSS information.
One other thing to think about is not using the * selector in your CSS. I am not sure why you would want to put a border around every single element on your page because to me, that would not look visually appealing. The border style attribute adds the thickness of the border to whichever dimensions it is applied to. So, in your case, every element in your page has 2px added to both its height and width, even the "html" element. This could be why you have the scroll bar but can't tell where the extra pixels are.
Also, do you have any CSS styles that set a width or min-width to 617 pixels? Or a combination of elements that share the same area and add up to 617 pixels? Maybe a table with columns that are not shrinkable?
There is a lot to look at and your URL looks like it's probably porno or something so I cannot go there at work and check it out...
Good Luck,
Matt
Edit
I fooled around with firebug for a few minutes and agree with Ruben that handling the overflow would be a good idea. Although I think the setting should be on the body instead of #content.
Try this:
body { overflow-x: hidden; }
Like Ruben's answer it is hiding overflow, but you can still get the vertical scrollbar if people REALLY narrow down their browser.
can you please warn us when it's nsfw :s
use this css:
#content { overflow: hidden }
not the best solution but you have to use firebug to find out what's sticking out
padding and borders increase the width of your element too
css3 box-sizing:border-box solved this one.
I have a web application originally designed to target IE7. I am readjusting the CSS to make the app presentable in the latest version of Chrome without breaking it for IE7 users. I've fixed mis-aligned sliding door input boxes throughout the site but there is one page where I cannot get the sliding door to align in both IE7 and Chrome. The setup is very simple:
<span>
<input type="text" ... />
</span>
In this case the span holds the left cap of the sliding door and the input holds the right cap and body. I've styled both span and input as inline-block with the same height and no margins or padding. Chrome nails it and it looks great but IE7 is rendering the input 1 pixel lower than the span like so:
need more reputation to post images
If I add -1px of top margin to the input then IE7 renders the thing correctly and Chrome renders it misaligned. I've tried comparing this instance to all of the other sliding door inputs in the app that work in both IE7 and Chrome but I cannot for the life of me see what is different here....
Anyone run into a problem like this before?
There's almost certainly a better way to fix this, but without seeing it..
Add a class to the broken input such as "ie7fix", then:
/* applies to only ie7 */
*+html .ie7fix {
margin-top: -1px;
}
http://en.wikipedia.org/wiki/CSS_filter#Star_plus_hack