koolx Posted January 22, 2015 Share Posted January 22, 2015 Hi guys. I'm using Opera version 12.16. I got a problem with how my CSS looks in Google. The CSS is perfect except the second link below the main link is superimposed on the description. See the pic to see what I mean. I also attacthed a pic to show how Google is supposed to look. (btw, I used "uii" as my search for this example). This error happens when I use another CSS for all sites with font set to arial, 17px and bold. I need both this CSS and the CSS for Google, so I cant choose one over the other. I also attached my CSS code for Google. How can Iget this link to obey and stay put? Please take a look and please help me with this issue, Thanks. CSS for Google.txt Link to comment Share on other sites More sharing options...
Ingolme Posted January 22, 2015 Share Posted January 22, 2015 The CSS means nothing without an HTML context to apply it to. That's also a whole lot of CSS to look through. Which are the rules that are targeting the element that's misplaced? It looks like you're using absolute or relative positioning somewhere, something that you shouldn't have to do. Link to comment Share on other sites More sharing options...
koolx Posted January 23, 2015 Author Share Posted January 23, 2015 (edited) The CSS means nothing without an HTML context to apply it to. That's also a whole lot of CSS to look through. Which are the rules that are targeting the element that's misplaced? It looks like you're using absolute or relative positioning somewhere, something that you shouldn't have to do. Hi, Ingoime.. The element in question and code I used is: *.f, *.irg-title > a, *.nrg-title, *.nrg-title > |a, *#brs > *.med, *.normal-header div.rg-header {margin-right: -44px !important;} As you see, I use 'margin-right: -44px'. It works. But it fails when I use my other CSS style that entails a font of arial, size of 17px and bold for all sites. The element for this is: ' * '. You said it looks like I'm using relative or absolute positioning. I dont know much about CSS. But what do you suggest I do? Edited January 23, 2015 by koolx Link to comment Share on other sites More sharing options...
Ingolme Posted January 23, 2015 Share Posted January 23, 2015 The * selector targets everything on the page. It's unnecessary because the class and ID selectors already do that without needing the * next to them. This selector looks like it will present a problem: *.nrg-title > |a The vertical pipe is not a valid selector and some browsers might ignore that rule. When I'm talking about absolute and relative positioning I'm referring to elements with the rule position: absolute; or position: relative; along with top, bottom, left or right rules. This causes elements on the page to overlap. If something's overlapping this is most likely the cause of it. This way of positioning is unnecessary for ordinary page layouts and can really mess things up. Link to comment Share on other sites More sharing options...
koolx Posted January 24, 2015 Author Share Posted January 24, 2015 The * selector targets everything on the page. It's unnecessary because the class and ID selectors already do that without needing the * next to them. This selector looks like it will present a problem: *.nrg-title > |a The vertical pipe is not a valid selector and some browsers might ignore that rule. When I'm talking about absolute and relative positioning I'm referring to elements with the rule position: absolute; or position: relative; along with top, bottom, left or right rules. This causes elements on the page to overlap. If something's overlapping this is most likely the cause of it. This way of positioning is unnecessary for ordinary page layouts and can really mess things up. Ok so what do you suggest I use as code to remedy this problem? Link to comment Share on other sites More sharing options...
Ingolme Posted January 24, 2015 Share Posted January 24, 2015 Well, I'd start by removing the vertical pipe from that selector. Other than that, I do not have sufficient information to devise a proper solution. As I mentioned in my first reply, without knowing the actual HTML structure of the page I can't know what the CSS is doing. It would be most helpful if you could show the problem on an actual page so I could see the problem in my browser. The problem most likely stems from positioning, so if you want to try fixing it yourself go through your code looking for position: absolute or position: relative and see which elements they're being applied to. Did you write all the CSS yourself? Link to comment Share on other sites More sharing options...
koolx Posted January 25, 2015 Author Share Posted January 25, 2015 Well, I'd start by removing the vertical pipe from that selector. Hi Ingolme.. I fixed the problem, thank god! But now I got an issue I need your help on. The link to my thread with my issue is here: http://w3schools.invisionzone.com/index.php?showtopic=52306 Please help me. Thanks.!! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now