I have this little problem. I am trying to fix the style of a website by examining the css using Firebug (in firefox).
The thing is that i can't figure out where this specific style is at because it appears in some
8EdeWkQAAAA%3d%3d">http://localhost:19478/asset.axd?id=kQAAAB-LCAAAAAAABADsvQdgHEmWJSYvbcp7f0r1StfgdKEIgGATJNiQQBDswYjN5pLsHWlHIymrKoHKZVZlXWYWQMztnbz33nvvvffee--997o7nU4n99__P1xmZAFs9s5K2smeIYCqyB8_fnwfPyJ-8Uezjx597xd_tPro0Ucn1bLNl-1Ho4_O-bMlfdbmZV4Xb8fTarGoluNp09DX1UePdn7JKGywyNu6ct_v_pLv_5Lvjz6attzkXXtXvrmkP_d2dvfGe-NPdx7QB1Pq_t6n9-mXjx619Tr_Jf9PAAAA_8EdeWkQAAAA%3d%3d
Obviously this seems to me something that is being created by the DOM?
I am attaching an image. Take a look at it and you will get a better picture of what i am asking here.
Thanks
Here is the image
Related
I cannot get hyperlinks to show up as an overlay (or watermark) in front of an image, as they should. Instead, I believe something is being overwritten by my WordPress theme's CSS, leaving plain HTML hyperlinks below the image.
Here is what my page looks like:
But here's what it's supposed to look like:
Here is what Chrome Inspect Element is telling me (Full image):
Here is what Firebug is telling me (Full image):
Unfortunately, I'm clueless with CSS. I believe my WordPress default theme is overriding some important settings, but I'm unsure what/how to adjust things. I can simply add !important clauses to things in my custom CSS, but I'm unsure as to what to put or how to put it.
Here is the stylesheet associated with my website, and here is a website that has the exact same thing I have, except it's functioning properly.
Any guidance in this regard would be greatly appreciated!
I am building a site using Drupal 7 and have run into a CSS issue. I am trying to wrap everything on this registration page in the center and at the same time reduce the width of the drop down buttons. I believe I've narrowed the problem to my logintobaggan (drupal module) css sheet. But the button "widths" seem to be from the foundation.min.css (according to chrome elements). How would you guys approach this CSS problem? I am relatively new, so please don't be too harsh ;). Thanks!
http://medicaldoctorapps.com/user/register
I would get Firebug or similar in-browser development tool, select the element you are interested in seeing the CSS properties for, and then see exactly which rules are being applied or overridden. You can even modify the CSS right there in the tool until you get want you want.
From such a tool, I can see that the button widths are not explicitly defined, but are basically derived from the amount of padding (5px) around the text string inside the button.
The rules are defined starting on line 41 of this file:
http://medicaldoctorapps.com/sites/all/modules/logintoboggan/logintoboggan.css?mgqhxk
Is there a way to quickly copy all of the css code of the inspected element in google chrome?
I found that while designing, it's sometimes easier to change the css on-the-fly via inspect to figure out correct pixel distances, rather than changing in the code and refreshing the page.
Does that capability even exists?
thanks to steveax's comment I was able to find the answer, which I will share with you
Once the inspected element has been edited, going to the sources tab and choosing the appropriate CSS where that element is defined, the edited attributes will appear there, which you can copy regularly..
Obviously, a copy straight from the style window would be more comfortable..
Hello
I have quite a strange problem using quicktabs. I used the framework theme to develop a custom look for my site. I used quicktabs in the center content area to create a tabbed look for placing links within the body. Everything is working fine. However, when I view the site in IE8 at a resolution if 1024*768, I have trouble with a few links. It seems that sometimes the first link under my buttons are difficult to click. The link is there - I can actually click it, but it is very difficult to locate - it only appears at the very beginning of the link text - it is not the first letter, it seems to be only the first pixel.
I looked at the source and everything seems to be correct - I can't figure out what could be wrong.
Has anyone seen any similar behavior that might be able to point me in the right direction for a fix for this?
Thanks for any thoughts.
Edit - I looked further into it and I think it has something to do with my CSS. I disabled css in ie8, and every link is clickable, even the ones that were difficult to locate earlier. I guess there must be an overlapping of containers or something, so I will have to start messing around with those files.
It sounds like a CSS thing, have you inspected the elements in question using the developer tools (press F12) to see whats going on?
I found the solution. In the style.css file for my theme, the .block had position: relative; applied to it. removing that bit of themeing appears to have fixed the link issue.
Thanks
I really like a div box that is styled a particular way on another webpage.
I'd like to incorporate the box into my website.
Is there a simple way that I could get the div box on my site? (I feel like I'm going to have understand the entire CSS file before I can make something similar, that is why I am asking).
Usually it is not that hard.
Try out firefox and some extensions:
firebug
webdeveloper
They can help you with highlighting the needed css code.
Just play around a bit with it.
You don't have to understand the whole site CSS by yourself, let the computer do its job.
Get some inspection tool like Firebug (for Firefox) or Dragonfly (for Opera) and see which rules are applied to the box you want and its inner elements. This way you may easily rip only the required rules (just copy and paste non-striked-out ones from the right part of the CSS pane in case of Firebug).