AblazeRich
Members
-
Joined
-
Last visited
Everything posted by AblazeRich
-
Yes was fiddling with it a bit just now. So are you saying that the original code I had for my CSS should be re-instated and then add padding?
- 10 replies
-
- div
- divs
- jumping up
- overlapping
-
Tagged with:
-
Thanks Lyndsey, That solved my first question but has created a knock on problem: the text now jumps down beneath the picture and is not next to it...
- 10 replies
-
- div
- divs
- jumping up
- overlapping
-
Tagged with:
-
Hello All Question 1: Really frustrating this one as I feel that I should be able to solve this as its a bit of newbie prob, but I've tried messing about with the clear:both and content: " "; and I can't seem to effect a change. Essentially the problem is that one of my paragraphs of text jumps up overlapping another paragraph of text. I cannot set these paragraphs to fixed sizes cos they pull the info from a database and also because the website is responsive/elastic. Its the first and second paragraphs of body text on this page: http://www.mason-uk.co.uk/responsive/html5boilerplate5-contactpage.asp Question 2: Also it would be cool if the bolder first paragraph of text could also wrap around the bottom of the image (if there is enough text there to do it). Is there a simple way of doing that? Many Thanks!
- 10 replies
-
- div
- divs
- jumping up
- overlapping
-
Tagged with:
-
Yes, take a look at the CSS for Margin and Padding and Borders. It can look like this (px = pixels): .text { padding:0px 20px 0px 0px; margin:0px 0px 0px 0px; border:2px; } The above numbers correspond to the padding (or margin or border) in each direction, starting with Top then Right, Bottom, Left. Clockwise; If you get what I mean? If you put a single figure, it will use that for all the directions (like border in the above example). Then in your HTML add class="text" into your <font> or <p> or <div> tag etc <p class="text"> YOUR TEXT HERE </P>
-
Thanks JP, thats kind of you. The latest version of my websites template is here: http://www.mason-uk.co.uk/responsive/html5boilerplate5-newnav4.html
-
Thanks Lyndsey, Read those articles and tried commenting out the Facebook and other share buttons, but to no avail! Cleared cache and everything. **** you IE!!! **** YOU!!!!!!!!!!!!!!!!!! :E :E
-
Hi J.P, Thanks again for your feedback. With me the correct font flashes up briefly and then changes to a san serif font (looks a bit helvetica'ish to me). Took out those extra title tags and another one I spotted that is IE7 specific, but that made no difference. Read that article but couldn't find much use there, as it does load the font and then somehow loses it! ARRRGH! But you say it comes up ok on yours in IE 7 and 8? Any chance of a screen grab? Thanks again!
-
Thanks JP, tried that but the problem continues. Does this suggest anything?
-
Thanks J.P, but it doesn't seem to have done anything....
-
Thanks 4li4s, Just read an article about that myself! Yes that kind of works, its in scale now, but it seems to have removed the elastic/scaling element from all browsers. By that I mean that the image just stays the same size no matter how you drag the browser window about (until it hits the next media query). Previously the image scaled... Still its a step in the right direction, but I would like the image to expand and contract depending on the resolution
-
Thanks Nillervision, I corrected those issues (mostly, although some of the code for FB like and Google +1 etc is still throwing up errors). But the problem I've still got is that IE 8 is not correctly scaling my images, where I have used max-width and min-width etc. The height distorts and doesn't scale with the width. Any ideas anyone?
-
Hey All, I am using a font for my clients website that is specific to them. I use the below code to load it up in the various formats needed to get it to run over most platforms. But for some strange reason, when I test it in IE 8, as it loads up it jumps back and forth between the correct font and another sans-serif font, before settling on the sans-serif font. This is the code in my CSS: CSS: @font-face { font-family: 'eddmondregular'; src: url('../eddmond-webfont.eot'); src: url('../eddmond-webfont.eot?#iefix') format('embedded-opentype'), url('../eddmond-webfont.woff') format('woff'), url('../eddmond-webfont.ttf') format('truetype'), url('../eddmond-webfont.svg#eddmondregular') format('svg'); font-weight: normal; font-style: normal; } .title { color: white; font-family: eddmondregular, Verdana, Geneva, sans-serif; font-size:14px; position:relative; border-bottom: solid 2px #FFF; padding:10px 0px 0px 0px; margin:0px 0px 0px 5px; float: left; } HTML <div class="header-container"> <header class="wrapper clearfix"> <div class="logo"> <a href="index.asp"> <img alt="Click here to return to Mason UK homepage" title="Click here to return to Mason UK homepage" border="0" src="images/mason-uk-logo.png" /></a> <h1 class="title">MASON UK LTD</h1> <h5 class="subtitle">Vibration Control Products<br> & Acoustic Floor Systems</h5> </div> I've looked in the CSS to find conflicts, but the only ones I can see are in the body and HTML tags, which should be overwritten by the class='title' shouldn't it? http://www.mason-uk.co.uk/responsive/html5boilerplate5-newnav.html Thanks Rich
-
Hi all, Having a problem with Max-width in CSS when running my responsive website in Internet.Explorer on the smaller screen resolutions. http://www.mason-uk.co.uk/responsive/html5boilerplate5-newnav.html To view open in IE and make the screen smaller than about 600px and you will see the main pic distort heigh wise. Is there anyway of instructing the css height to stay in scale to the width? Thanks Rich
-
Thanks guys it just started working for some reason.... dunno why it wasn't before? Perhaps there was a glitch with my FTP upload, it did it to me the other day too... Thanks
-
I have got modernizr, it just doesn't seem to help in this case
-
Thanks but I already tried float right and it doesn't seem to work in this case, dunno why, v.annoying Also this is a responsive/elastic design, so I can't really used fixed pixels...
-
Ok, I'm sure that I am missing something obvious here, but I cannot seem to get my Nav bar to align right. Its really frustrating me, tried the float:right and also margin:auto, but not getting anywhere. Do you have any ideas? This website is responsive/elastic, so I am reluctant to resort to fixed pixel widths or even percentages if I can avoid them (although will try this if I have to) There must be a simple way of just telling a div to align to the right? http://www.mason-uk.co.uk/responsive/html5boilerplate5-newnav.html
-
Perhaps look up formatting forms? Doesn't the standard HTML 5 Drop shadow code work?
-
Been working with some new nav code, its still a bit rough around the css edges, but its working better: http://www.mason-uk.co.uk/responsive/html5boilerplate5-newnav.html Although in IE at the smaller resolutions, the buttons are still not coming out quite right, they are all in a line, not dropping down nicely like in Firefox and Chrome, perhaps this is the best I can expect?
-
Thanks Lyndsey but I've already got modernizr installed. Although I did try the code you recommended, but it made no difference
-
Hi Everyone, Thanks for your help before with responsive web design. The template is progressing nicely now; http://www.mason-uk.co.uk/responsive/html5boilerplate5.html Although I am having some issues in IE with the Navigation. I am using the following Nav (although pretty good in Google Chrome and Firefox): Flexnav: http://jasonweaver.name/lab/flexiblenavigation/ Have any of you experience this? How did you get around it? Do you know of any better code for this? I've been looking at: http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation/ Which seems a bit more robust, but again, doesn't quite look right in the lower res on IE (but is still functional). Any advice? Cheers Rich
-
Although I don't do it, I have heard that people with multiple directory websites sometimes have a index.* in each folder, so that if a user enters on a search engine link and can't find a particular page, they can simply delete back (in the web address bar of the browser) to the folder name and get to the step before the page they are trying to find. Think this sort of structure is only necessary for massive websites (with multiple areas) though.
-
Are you viewing online or offline? Cos my sharethis stuff doesn't work properly unless online. (by that I mean that the website needs to be uploaded to host) Have you a link to the website?
-
Hi All, Finally getting this template there a bit and getting to grips with this responsive code. So I thought I'd better test it out in a couple of the main browsers. What a surprise! There is an IE issue, but don't understand what is causing it or how to fix it. Essentially in IE, the nav doesn't seem to jump to the media query for bigger screens, it just stretches out the nav design for smaller monitors. It should loose the 'Menu' bit and instead jump to the first level of menu choices. http://www.mason-uk....oilerplate.html Any ideas? Thanks Rich PS This is the original code that I modified, which also does not seem to display quite right in IE http://jasonweaver.name/lab/flexiblenavigation/
-
Sorry! Solved it! Made the wrapper DIV width:100% But is there a better way to be doing this? This CSS is kinda complex for me, its not the way I would usually do mine and I'm finding that there seems to be a lot of different bits in the CSS that affect one bit in the HTML. Especially with the flexnav.css there seems to be quite a lot of overlap and conflict, its a bit of a headf*ck!
