I'm having this really strange problem with the CSS of my custom validator.
I have a custom validator with the display property set to dynamic and the CSSclass property set to a CSS class I wrote.
In this CSS class I have a padding property. My problem is that the left and right values of the padding just reverse for no reason when I view my website in IE7 or IE8 with compatibility view set to on.
The values just flip, the amount of pixels set to the left padding appear on the right and the other way around.
Sorry for not posting the code, I'm writing this from my phone because we don't have Internet access in this network.
Any ideas?
Had the same problem with span containing arabic text within an anchor tag - padding was inverted. Changing text to latin was one way to fix it :) Another one was to add zoom:1 to that span.
Without seeing any code...I can only assume that the default margin and padding values are being interpreted differently by each of the browsers. I'd recommend adding a css reset stylesheet just above your other stylesheet to see if that changes anything?
CSS RESET STYLESHEET: http://meyerweb.com/eric/tools/css/reset/
Hope that helps a little. :)
Related
I am having an issue with the layout of my website in Firefox it works in Chrome. It is also hard to show you my code because I am using some plug ins to add elements so it is not just in normal HTML. The images inside the table cell are being displayed full size in Firefox which is messing up my layout.
I was playing around with the inspector and I saw that if I untick display:table cell the layout goes back to how I want it.
Could I please have a pointer of how to override this in the CSS?
The default value of the display property depends on the specific element, but for layout elements it is most likely block. Therefore you can use display:block to reset the value to its cascading default.
Check this out:
http://codepen.io/maxwbailey/pen/vGKBr
Now, they look fine when you aren't hovering over them, but when you hover over the <button> and <input> elements, you'll see that the text below them is bumped around a bit, while hovering over the <a> element does not cause the same effect. That's because the <button> and <input> elements are displaying as inline-blocks still (which handle borders, padding, and margins differently than regular inlines), despite the display: inline !important; line that is applied to them.
Is there anyway to override this? I know it's doable via hacks like borders with the same colour as the background, etc. but I'd really like to know if there's a way to make them display: inline properly.
Note: The problem here isn't about the text being bumped around (though that is an effect of it), it's that, despite everything saying otherwise, the browser is still forcing the button to display as an inline-block. Thanks to everyone who's provided methods to prevent the text bumping from happening, but that's not the real problem here.
Thanks!
Not sure the context of why your markup exists like this, but the issue looks like it's being triggered by setting the font-family. If you take a look at this pen - http://codepen.io/pnts/pen/Egwuo - the hover works fine without a font-family specified, but if you uncomment the line specifying one, the jumping begins.
It seems your question is a little misleading. Your button tag IS in fact set to display:inline on both normal and hover states. It sounds like the question you have is how to prevent the text below from getting bumped down on rollover. Instead of using a bottom border as you are currently, why not use the following in the hover state to achieve the underline?
text-decoration:underline;
agree with the previous answer, however if you want the flexibility of a border, being able to use padding to adjust where it lays etc, you could use
border:1px solid transparent;
not as hacky as using the same color as you bg because it doesn't matter the color of the background that way.
I'm currently using the Blueprint CSS framework setting my width to 910px along with the sticky footer markup by Steve Hatcher.
The problem I'm getting is that for some reason in only Internet Explorer 6 is that an extra padding/margin of 10px is being added on the right hand side of my #wrap class.
I have uploaded my test site here:
http://www.prashantraju.com/test
Here is a comparison of IE6 vs IE7.
comaparison http://www.prashantraju.com/test/ie6ie7.gif
As you can see there is no margin/padding on the right hand side (the red area) with IE7 but in IE6 there is an extra 10px.
Is there a way to fix this - or what the cause of the extra 10px is?
Thanks in advance.
From what I can get with FireBug, there is no explicitly width set to the navigation bar, what if you give it a fixed size(same as 910px)?
Edited:
Sorry, given the FireBug css output, I suspect that you are using a inherited element from screen.css from line 101: margin-right:10px;
I reckon that is the cause.
Now that the navigation bar has it own css entry in the stylesheet, maybe you can reassign the margin-right element valut back to zero to resolve this problem.
(clickable)
Mainad has a valid height and width, however it isn't shown like subad1/subad2. Which are in essence exactly the same! (just a different background image).
Firebug shows my div as greyed out for some weird reason. Replacing the contents of mainad with just some text doesn't solve the problem (problem isn't related to inner elements)..
What's going on?! :(
Do you have AdBlock installed? That might be hiding that div.
An extra little note: FireBug will actually show something like this in the Style pane when AdBlock Plus is blocking it (wrapped for clarity):
.mainad, #mainad { undefined (line 233)
-moz-binding:url(chrome://global/content/bindings/
general.xml?abphit:707307897865#basecontrol) !important;
}
Firebug displays selectors without HTML content, or block element styles as gray. If you edit the HTML, and add some copy you will see the selector regain its colors.
I have setup my form using CSS.. Labels float to the left and input/textareas float to the right. They align fine.
However I recently added a block with checkbox elements. For some reason, there is a margin appearing above it which I have not been able to find the solution to fix. I suspect it is a float problem but I can not figure it out. I'm generally pretty good with CSS.
(no longer viewable)
Notice the extra space above the checkbox block... Borders are on to help you understand where the divs lie.
So where is the offending CSS code?
Thank you!
Update
It appears to be fine in Safari.
I am testing on firefox 3 on mac osx .
This is because you are using a fieldset with a legend. The legend is pushing the top margin out. Legends are very difficult to style cross browser, in fact most browsers cant style them at all other than font color.
Check this link to see some research that has been done on styling legend elements (with cross browser screenshots): legend styling
I suggest you hide the legend, and include an extra label inside the fieldset for cross browser goodness.
I think its this:
.option-row input {style.css (line 562)
display:block;
float:left;
width:10%;
}
Firebug is telling me that your borders overlap. Reducing the width of that box to 8% would work, but not sure that achieves what you want?
if i'm not mistaken, your checkbox and label within the option-row class are both defined as block-level elements. try removing the display property or setting it to inline.