OK, I have scanned the forums trying to find a solution to my dilemma and have tried everything I found. If someone could please take a look at the following URL: angrybullhartford
When I resize any browser, the problems seem to differ a little, The two images in the right sidebar do not center and scale to a tiny size. The slider at the top of the page is small and off center as well. I had this working at one point and cannot get back to it. If it is something simple and someone could tell me why this is occurring I would appreciate it.
Thank you!
There is some sort of left margin or padding on the slider. It does not line up with the elements below it. When you start to make the page smaller, you can really see this margin I'm talking about.
Anyhow, try this: Change your CSS to
#page .pad {
padding: 40px;
background-color: transparent;
}
This produced a much cleaner result for me, not sure if it's exactly what you want though. Being that you're using BS2, you may have to write some media queries to handle your extra styles.
Related
I have a site that can be seen at gronenproperties . com
I am using a div with an id "contact-add"
and absolute positioning it in the DIV where I want it to be.
Firefox shows it fine for the most part, but it shifts when i resize the window, and different browsers and OS's seem to place it somewhere else entirely.
I have been out of the game for awhile when it comes to css and making things cross compatible...In my research, it says to make the parent div relevant and should solve issue.
Pretty sure Ive done that.
If someone could teach me old tricks, but new trick to me.
Id greatly appreciate it
Thanks
Put everthing in a div with margin: 0 auto; and width: 960; or width: 1120;
For some reason I cannot get the placement of a line of text to remain consistent in different browsers. I'm trying to get the comments line and the "like" heart line to align correctly like you see in the lower right of this image taken from Firefox:
However, when viewing the same page in chrome or Safari it looks like this:
I tried messing around with the relative positioning of the div in CSS but haven't been able to find a solution for this problem. Any help would be much appreciated! The website is www.misscarispreschool.com if you'd like to check it out.
Thank you!
Your .entry-meta-right class needs a width of at least 112px, but you may want to make it bigger than that, depending on what your going for.
Also, .like-74 .like, .action_like { margin-top: 2px; } makes it look nice
: )
So up near the top in the CSS reset, I added an additional rule to set all image elements to be max-width: 100%. However, my images aren't resizing properly, especially the gallery. It's supposed to stay in a horizontal bar, however I can't for the life of me get it to work, and I have no idea why. I'm not familiar with responsive design in particular. I bought a book and still don't understand it. What am I doing wrong?
Thank you!
http://lrroberts0122.github.com/DWS/lab5/index.html
http://lrroberts0122.github.com/DWS/lab5/css/main.css
I can't see anywhere where you have specified what width the images should be. By adding img { width: 100%; } to your CSS it works for me.
Also you know you have included your CSS twice
I've followed the tutorial url to get a popup working:
I have one caveat though. Sometimes the pages it will be popping up from are really, really long. The code in the tutorial has it popping up in the center. Vertically, this is not acceptable. I'm trying to get it to pop up in the center, but at the very top. I've used top: 0px; and for testing purposes left: 0px; (and a few others) but it seems to matter not. Always pops up in the center.
You can take a look at the latest one I've done here
Am I missing something?
Your technique is very old and not the right way!
What happens in your case is, you have considered the page's height and width for calculating the center position. If you can change it like:
popUpDiv.style.top = '10%';
Just give a try and let me know.
Best Suggestion: Use jQuery! :)
But, what I have followed is from Queness, which is still more simple.
Tutorial: Simple jQuery Modal Window Tutorial and Live Demo.
Hope it helps! :)
In your css for #popUpDiv do top : 0 !important and you will find your popup box at the top. It is because javascript is calculating the top position and its overwriting your css style. Hope this helps.
The problem is your top and left values are being ignored in the CSS because whatever script you're using to make the popup happen is applying the styles inline directly to the popup. So you should look through that script and find where it's applying the styles, then change it there.
I can't seem to get the graphics on the top and the bottom of the navigation menu to have no gaps. Since the top and bottom images need to be stretched it can't be done as a background image. The 3 pieces need to be touching. I have tried using tables, setting margins and padding to 0px on everything, even tried using a css clear file and I still cannot get them touching.
jsFiddle... http://jsfiddle.net/PerryCS/JXVGM/1/
Am I trying to force the browser to do something it's not capable of doing? Where is the extra spacing coming from?
Please and thank you!
I don't mind trying things out. I have spent about 11 hours fiddling with this and I'm very frustrated at the lack of understanding on my part at why there is still a space. Ugh.
Needs to work on IE7 and above please. :)
Add display: block to .navribbon img: http://jsfiddle.net/thirtydot/JXVGM/2/