It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 11 years ago.
I am having a problem with margins / line-height in one of our websites.
I am using a Jquery script to create a Drop Cap effect in the first letter of each sections, that adds a class to them. There are two types of dropcaps, as you can see. Google Chrome is not rendering the smaller ones correctly. You can compare with other browser and see the difference.
Any idea about why is this happening? Is there a fix / hack for this?
I managed to fix it by adjusting your line-height on your p tags.
I adjusted it to 1.8 - anything less and the third line of copy can not flow underneath the drop cap.
See the images:
alt text http://web17.twitpic.com/img/126705561-f3957c59ceac70c081953d4ce00c9d5e.4c35afb0-full.png
alt text http://web14.twitpic.com/img/126705484-0b710f203011f574c598d698fffce8ab.4c35afb0-full.png
A workaround would be to set margin-top:-1px to the .dropcap CSS rule ..
must be some discrepancy on the size the text gets rendered..
Changing the line-height to 1.8em worked for me. But in general, this problem is very difficult to avoid because fonts are rendered differently across platforms and even across browsers.
Related
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
So, when ive been looking at the code that goes along with a HTML website i noticed at the top where the Facebook, Twitter & Google logos are i searched for the HTML code where i found a link. However can someone explain why there is no <img src="...."> with the image and only <a href=".....">. This may be a novice question but its bugging me. Thanks for any help.
That <a> is probably styled with CSS to have a background image:
background-image: url('path/to/background/image.jpg');
It's somewhat common to just set the background-image CSS property on e.g. a link, instead of including a full image tag, in instances like a logo.
Without seeing the example code, one good reason for this might be because they have styled the tag to look nice when putting images inside the body of the page, but they don't want to apply those styles to their logo (it shouldn't have, probably, padding, margins, etc.). Using background-image is a way to avoid inheriting styles, without just overriding them explicitly.
For a more detailed discussion of when one is used instead of the other, you might try reading some of the answers in this other SO question: When to use IMG vs. CSS background-image?
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
i am trying to fix this css thing, but i cannot do it somehow, i am not also css guru actually. so i turned to ask this here.
the problem is in this page, in the last slider header on the right: "Locations eintragen".
the bottom half of this last div is in chrome a bit hidden,
if you see it in Firefox, this is shown correctly. how can I fix this? i want that it should be like in Firefox.
appreciate any help.
the accordion that contains your menu items has its height set to 400px, limiting the height of the items contained in it. You should set the height to another value, or remove limitation.
Hint: you should press F12 in Chrome to bring up the developers' tools. From there, you can right click on elements on your page and choose "inspect element". Then you will be able to see what styles are being inherited, disable and alter them to see effect, etc.
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I'm designing my own portfolio site and only have some basic knowledge about wordpress, html, and CSS. On my individual portfolio pages there is text and a graphic, and the text is supposed to sit higher on the page than the graphic, which will sit below. This works just fine in Firefox, Safari, and Chrome, but it's giving me issues in Internet Explorer, and is creating an issue where the text is sitting to the left of the image, shrinking and smushing the image into a smaller, condensed space.
http://mikeklok.com/portfolio/myt-product-creation-2/
Any way to solve this with CSS? Im not advanced enough to understand how to find and edit the html, as it's not made as easily available as the CSS.
Thanks,
Your containing div is divided into two separate divs with classes "first column" and "last column" respectively, each specified with the styles width: 50%; float: left;. I really wonder why Chrome, FF and Safari make such a mess of it.
Remove those styles, or add break: both; to the second one.
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
Appearance-wise, I am struggling to use CSS to create buttons for forms that will look ok cross-platform and be consistent with each other without using images. Is there such a thing? I just need add/delete/cancel/validate buttons for my form, but I'd like them to be uniform, and ideally work cross platform whether they are submit inputs, buttons, or links.
I really don't want to fiddle in Photoshop though.
I found this resource on Rediscovering the Button Element (archive.org), which shows it can be done with CSS and an image gallery for designers who don't want to create their own.
The solution looks ok, but there are complaints about what IE submits in the postdata in the comments, and about how IE renders the buttons in IE 6. How can I get around the issues with IE6?
There are a few options, one being color gradients. There is a way to do it in "The Big Three" (Firefox, Chrome/Safari, IE), and you can find a great example here.
A second option is to use jQuery UI, and that is a nice way that tends to be cross-browser safe, but the drawback is that it can be a lot to include for buttons.
The last option would be to use images as the background, but that can be a bit tricky in IE, or at least that I've found.
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 12 years ago.
My website in acting stangely while being viewed in firefox so I started debugging and found firefox only is adding extra <strong> tags in my code, all empty?
Any ideas?
http://allia.honestideas.co.uk/
Any time the generated markup differs from the markup retrieved from the server (i.e., the markup you get when doing "View Source"), JavaScript is involved. The only way the structure of the page can be different from the markup you wrote is if JavaScript is making changes.
In this case, the extra <strong> tags all seem to be clustered immediately around the slider markup. I can't find any obvious explanation in slider.js but it's also not a plugin I'm intimately familiar with. Removing slider.js from the page entirely should solve the problem, but of course you then won't have the functionality you want. Perhaps a different plugin can offer the same functionality without the unintended side-effects.
Firefox is not adding anything. If you look at 'view source', there are no strong tags in there. So what debugger are you using? I'd bet the debugger is inserting something.
In firebug, I see a strong syntax in the code
#mainContent strong, #mainContent label
may be this causing some issues. I am not sure too.