I'm trying to get a centered image that spans the entire page, with a small text box overlay. You can see my attempt at www.cloudtute.com.
Unfortunately this doesn't work in all browsers and the form elements look weird in some browsers. E.g. trying it in internet explorer 9 it comes up tiled and the text box is black!
I was trying to go for a similar effect to the image on www.airbnb.com which works in all browsers - can anyone tell me where I'm going wrong please?
From what you've explained it shouldnt be too difficult. However www.cloudtute.com isnt opening for me, it comes up with not found, so I cant see your code. If you can add your current code or get the website working again I can help out.
Related
I am trying to make a responsive website, but I am stumbling upon a weird problem. When I am looking on the desktop page, everything is in the right position. There are no pixels left.
However, when I am loading the responsive version on my mobile, I see some pixels left (just scroll to the left or the right and you will see what I mean). The problem gets bigger when there is content like a single post or page.
The website is here: http://FavoriteFM.com.
I can provider the CSS code, but it will be a lot of lines. I am suspecting something in the content is 'sticking out'. But I am not sure of a tool that can see such problems.
Thanks,
Dennis
Today I have disabled every div by div. I figured out the problem is with the sidebar. I still had: 'left: 8px;' on. Removing it did the trick for me. So if you have this problem, check if something of your content is 'sticking' outside your wrapper. Even if you can't see it, it still can be there.
I'm getting a really strange issue when using svg's on my site, see http://i.imgur.com/o4cCF8u.png. The svg that I want displayed is just the arrow icon, but the rest of the characters in the svg set (along with a box for some reason) are also showing up very tiny to the left. Check out the lists on http://camilleblock.com/critter/features/typography/
Has anyone else run into this issue, if so how did you fix it?
i've a little bit trouble to fix one thing, may you could help me out with it?
I try to make Chrome/Firefox works with a Logo sliding problem. You can see here the first pci is how does it looks like in win with chrome or firefox. IE looks normal like the second pic.
What did i wrong in the code? many thanks in advance.
http://abload.de/img/bildschirmfoto2013-067oqb8.png
http://abload.de/img/bildschirmfoto2013-06u6rho.png
I can't tell you unless I see the CSS. Post the css on something like pastbin.com or if it isn't real long then add it to your question and then you are likely to get some answers, but I can't tell you what is wrong with your CSS from a picture of the results. Too many possibilities.
Now I'm wishing I had asked for a demonstration instead. Am I correct in thinking that the text is part of a horizontal menu and the logo is completely separate and not contained by the text container at all? If this is the case and the image looks and behaves like you want then perhaps it is the menu that needs tweaking to get it to match up correctly. At first I was thinking this was something like a div containing text and an image or having an image as a background.
If you could go ahead and post a link to a page or a pastebin or something that has the html and the css for the menu and the logo together then I'll try it out myself and see if I can find the solution. Someone else may already see it, but I'm still not seeing the clear picture of your situation or a resolution to your problem yet.
I'm using a background image for a submit button that I've using for a search form, and am trying to align the submit button/background image it so that it's vertically centered within the search input bar.
Check out the JSFiddle with my code to get a better idea of what I mean:
http://jsfiddle.net/XVx5A/3/
It aligns perfectly for FF and Chrome, but for some reason is stuck above the input bar in IE, and I can't seem to figure out why. Any advice on what's going on here and how to make this work in IE?
Note: I was originally using the image itself to submit the form, but do not want to go that way because of the automatic x & y coordinates messing up the clean url structure.
Thanks in advance for your help.
Floating the button and adding a fixed height to the search field normalizes positioning. Updated: http://jsfiddle.net/XVx5A/21/
You could also make the submit transparent and include the search icon as the text field's background.
Try to remove height:20px from .submit_search_icon. At least on Mac it looks better in Chrome.
I am trying to build an interactive map using an imagemap and jquery. I have it completed and it works great in FireFox but IE7 is causing some issues.
You can take a look at it here:
http://www.thecolumbianchicago.com/map/
In IE7 the title of the rollover is not getting the width set properly. Also once you rollover the tall building icon in the center, the background of the title disappears. I'm guessing its a CSS issue but I can't figure it out.
Anyone got any ideas?
Thanks
I figured it out, it was the javascript. I guess IE doesn't like .attr('width') and was returning a zero. I changed the code to have the width put into the image as rel="width" and used .attr('rel') and its all good now.
Don't mess with html image maps. You can use vector based interactive maps with jVectorMap.